[導讀] 現在我們做個在IE裡應用xml的一個小範例：解決雙下拉選單的連動問題。大家最常見的可能就是選取省份後改變城市選項的例子了，那我們就來試試用XML來完成吧。先前介紹的一些功能我是直接用XML+XSL檔來完成的，
現在我們做個在IE裡應用xml的一個小例子：解決雙下拉選單的連動問題。大家最常見的可能就是選取省份後改變城市選項的例子了，那我們就來試試用XML來完成吧。
以前介紹的一些功能我是直接用XML+XSL檔案來完成的，大家可能還不是很熟悉它的用法，所以我這次就用HMTL+XML來做，希望能夠讓大家更清楚的了解--「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的時候，我也有著和大家一樣的迷惑--- 「XML我是學了，可究竟這XML該怎麼用呢？所以我將網站建置中最常用到的一些功能以XML的方式完成。 你也一樣可以的！
以上是XML實戰秘籍第四卷：選單連動的詳細內容。更多資訊請關注PHP中文網其他相關文章！
