XML卷之实战锦囊（4）：选单连动

动机：
现在我们做个在IE里应用XML的一个小例子：解决双下拉选单的连动问题。大家最常见的可能就是选取省份后改变城市选项的例子了，那我们就来尝试着用XML来完成吧。

以前介绍的一些功能我是直接用XML+XSL文件来完成的，大家可能还不是很熟悉它的用法，所以我这次就用HMTL+XML来做，希望能够让大家更清楚的了解--“XML原来可以如此简单！”：）

材料：
XML卷之选单连动
有2个文件：Citys.xml 和 CitySelect.htm

作用：
选择省份后可以自动显示相对应的城市，这样方便用户，有效的提高数据互动，让自己的页面更加绚丽多彩。
效果：
浏览这里

Citys.xml

程序代码：	[ 复制代码到剪贴板 ]

 1<china>
 2<state id="1" name="江西">
 3<city>九江</city>
 4<city>南昌</city>
 5<city>庐山</city>
 6<city>景德镇</city>
 7</state>
 8<state id="2" name="北京">
 9<city>北京西</city>
10<city>居庸关</city>
11<city>清华园</city>
12<city>周口店</city>
13</state>
14<state id="3" name="福建">
15<city>福州</city>
16<city>厦门</city>
17<city>漳州</city>
18</state>
19<state id="4" name="甘肃">
20<city>兰州</city>
21<city>洛门</city>
22<city>嘉峪关</city>
23</state>
24<state id="5" name="广东">
25<city>广州</city>
26<city>深圳</city>
27<city>东莞</city>
28<city>石牌</city>
29</state>
30<state id="6" name="安徽">
31<city>合肥</city>
32<city>黄山</city>
33<city>九龙岗</city>
34<city>马鞍山</city>
35</state>
36</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

 1<sortfield.length;++i) ";="" (根据当前选定的省名来读取xml数据中的对应城市名称，并增加到selcity="" +sortfield[i].text+"="" ---|---="" [="" ]="" choosecity()="" choosecity();="" for(var="" form1.selstate.options.add(ooption);="" function="" i="form1.SelCity.options.length-1;i" ooption="document.createElement('OPTION');" ooption.text=" " ooption.value="sortField[i].text;" sortfield="root.selectNodes(&quot;//State[@name='&quot;+y+&quot;']/City&amp;q" uot;);="" var="" x="form1.SelState.selectedIndex;" y="form1.SelState.options[x].value;" {="" |="" }="" 参数y的state节点下的所有city节点="" 增加省份名称到下拉列表="" 复制代码到剪贴板="" 搜索name属性值等于="" 的下拉列表中)="" 程序代码：="" 自定义函数：choosecity="" 读取省份下拉框的当前选项="">=0;--i) //撤消原来的列表项   
 2{   
 3form1.SelCity.options.remove(i)   
 4}   
 5for(var i=0;i<sortfield.length;++i) ";="" +sortfield[i].text+"="" ---|---="" <body="" [="" ]="" form1.selcity.options.add(ooption);="" onload="ChooseState()" ooption="document.createElement('OPTION');" ooption.text=" " ooption.value="sortField[i].text;" var="" {="" |="" }="" 增加城市名称到下拉列表="" 复制代码到剪贴板="" 程序代码：="" 表单源码="">
 6<form action="" id="form1" method="post" name="form1">
 7<select id="SelState" name="SelState" onchange="ChooseCity()">
 8</select>
 9<select id="SelCity" name="SelCity">
10</select>
11</form>
12
13
14  
15  
16后记：   
17刚开始学XML的时候，我也有着和大家一样的迷惑 --- “XML我是学了，可究竟这XML应该怎么用呢？”这个问题阻难了我很久，很久......   
18  
19因为电子商务和软件开发是我的专长，于是我觉得还是从身边最熟悉的开始做起吧。所以我将网站建设中最常用到的一些功能以XML的方式来完成。 你也一样可以的！</sortfield.length;++i)></sortfield.length;++i)>