動機：
現在我們做個在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的方式完成。 你也一樣可以的！