XML卷之实战锦囊(4)选单连动

【 tulaoshi.com - Web开发 】

　　动机： 

　　现在我们做个在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;isortField.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;isortField.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()" /SELECTSELECT name="SelCity" id="SelCity" /SELECT/FORM/BODY

　　后记： 

　　刚开始学XML的时候，我也有着和大家一样的迷惑  --- XML我是学了，可究竟这XML应该怎么用呢？这个问题阻难了我很久，很久......

　　因为电子商务和软件开发是我的专长，于是我觉得还是从身边最熟悉的开始做起吧。所以我将网站建设中最常用到的一些功能以XML的方式来完成。 你也一样可以的！