溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下XML卷之選單連動的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
XML卷之選單連動
有2個文件：Citys.xml 和 CitySelect.htm
作用：
選擇省份后可以自動顯示相對應的城市，這樣方便用戶，有效的提高數據互動，讓自己的頁面更加絢麗多彩。
效果：
瀏覽這里
代碼：
Citys.xml <?xml version="1.0" encoding="gb2312"?> <China> <State id="1" name="江西"> <City>九江</City> <City>南昌</City> <City>廬山</City> <City>景德鎮</City> </State> <State id="2" name="北京"> <City>北京西</City> <City>居庸關</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>嘉峪關</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
自定義函數：ChooseState
(讀取XML數據中的省的名稱，并增加到SelState的下拉列表中)
function ChooseState()
{
var source;
var sourceName = "Citys.xml";
var source = new ActiveXObject('Microsoft.XMLDOM'); //創建一個 MSXML解析器實例
source.async = false;
source.load(sourceName); //裝入XML文檔
root = source.documentElement; //設置文檔元素為根節點元素
sortField=root.selectNodes("//@name"); //搜索屬性中含有name的所有節點
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();
}自定義函數：ChooseCity
(根據當前選定的省名來讀取XML數據中的對應城市名稱，并增加到SelCity 的下拉列表中)
function ChooseCity()
{
x=form1.SelState.selectedIndex; //讀取省份下拉框的當前選項
y=form1.SelState.options[x].value;
sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;); //搜索name屬性值等于
參數y的State節點下的所有city節點
for(var i=form1.SelCity.options.length-1;i>=0;--i) //撤消原來的列表項
{
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卷之選單連動的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
