XML卷之實戰錦囊（4）：選單連動

class="area"> 現在我們做個在IE裡應用XML的一個小例子：解決雙下拉選單的連動問題。大家最常見的可能就是選取省份後改變城市選項的例子了，那我們就來嘗試著用XML來完成吧。以前介紹的一些功能我是直接用XML+XSL文件來完成的，大家可能還不是很熟悉它的用法，所以我這次就用HMTL+XML來做，希望能夠讓大家更清楚的了解--“XML原來可以如此簡單！”：）

材料：
XML卷之選單連動
有2個文件：Citys.xml 和 CitySelect.htm
作用：
選擇省份後可以自動顯示相對應的城市，這樣方便用戶，有效的提高數據互動，讓自己的頁面更加絢麗多彩。
效果：
浏覽這裡
代碼：
Citys.xml



九江
南昌
廬山
景德鎮


北京西
居庸關
清華園
周口店


福州
廈門
漳州


蘭州
洛門
嘉峪關


廣州
深圳
東莞
石牌


合肥
黃山
九龍崗
馬鞍山


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 {
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 {
var oOption = document.createElement('OPTION');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].text;
form1.SelCity.options.add(oOption);
}
}

表單源碼

後記：
剛開始學XML的時候，我也有著和大家一樣的迷惑 --- “XML我是學了，可究竟這XML應該怎麼用呢？”這個問題阻難了我很久，很久......
因為電子商務和軟件開發是我的專長，於是我覺得還是從身邊最熟悉的開始做起吧。所以我將網站建設中最常用到的一些功能以XML的方式來完成。 你也一樣可以的！