您好,登錄后才能下訂單哦!
小編給大家分享一下XML卷之選單連動(dòng)的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
XML卷之選單連動(dòng)
有2個(gè)文件:Citys.xml 和 CitySelect.htm
作用:
選擇省份后可以自動(dòng)顯示相對(duì)應(yīng)的城市,這樣方便用戶,有效的提高數(shù)據(jù)互動(dòng),讓自己的頁面更加絢麗多彩。
效果:
瀏覽這里
代碼:
Citys.xml <?xml version="1.0" encoding="gb2312"?> <China> <State id="1" name="江西"> <City>九江</City> <City>南昌</City> <City>廬山</City> <City>景德鎮(zhèn)</City> </State> <State id="2" name="北京"> <City>北京西</City> <City>居庸關(guān)</City> <City>清華園</City> <City>周口店</City> </State> <State id="3" name="福建"> <City>福州</City> <City>廈門</City> <City>漳州</City> </State> <State id="4" name="甘肅"> <City>蘭州</City> <City>洛門</City> <City>嘉峪關(guān)</City> </State> <State id="5" name="廣東"> <City>廣州</City> <City>深圳</City> <City>東莞</City> <City>石牌</City> </State> <State id="6" name="安徽"> <City>合肥</City> <City>黃山</City> <City>九龍崗</City> <City>馬鞍山</City> </State> </China>
CitySelect.htm
自定義函數(shù):ChooseState
(讀取XML數(shù)據(jù)中的省的名稱,并增加到SelState的下拉列表中)
function ChooseState() { var source; var sourceName = "Citys.xml"; var source = new ActiveXObject('Microsoft.XMLDOM'); //創(chuàng)建一個(gè) MSXML解析器實(shí)例 source.async = false; source.load(sourceName); //裝入XML文檔 root = source.documentElement; //設(shè)置文檔元素為根節(jié)點(diǎn)元素 sortField=root.selectNodes("//@name"); //搜索屬性中含有name的所有節(jié)點(diǎn) for(var i=0;i<sortField.length;++i) //增加省份名稱到下拉列表 { var oOption = document.createElement('OPTION'); oOption.text = " "+sortField[i].text+" "; oOption.value = sortField[i].text; form1.SelState.options.add(oOption); } ChooseCity(); }
自定義函數(shù):ChooseCity
(根據(jù)當(dāng)前選定的省名來讀取XML數(shù)據(jù)中的對(duì)應(yīng)城市名稱,并增加到SelCity 的下拉列表中)
function ChooseCity() { x=form1.SelState.selectedIndex; //讀取省份下拉框的當(dāng)前選項(xiàng) y=form1.SelState.options[x].value; sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;); //搜索name屬性值等于 參數(shù)y的State節(jié)點(diǎn)下的所有city節(jié)點(diǎn) for(var i=form1.SelCity.options.length-1;i>=0;--i) //撤消原來的列表項(xiàng) { form1.SelCity.options.remove(i) } for(var i=0;i<sortField.length;++i) //增加城市名稱到下拉列表 { var oOption = document.createElement('OPTION'); oOption.text = " "+sortField[i].text+" "; oOption.value = sortField[i].text; form1.SelCity.options.add(oOption); } }
表單源碼
<BODY onLoad="ChooseState()"> <FORM action="" method="post" id="form1" name="form1"> <SELECT name="SelState" id="SelState" onchange="ChooseCity()" > </SELECT> <SELECT name="SelCity" id="SelCity" > </SELECT> </FORM> </BODY>
以上是“XML卷之選單連動(dòng)的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。