XML卷之实战锦囊(4)：选单连动_Xml教程
推荐：XML入门教程：XML CDATA所有XML文档中的文本均会被解析器解析。 只有CDATA区段（CDATA section）中的文本会被解析器忽略。 Parsed Data XML解析器通常会解析XML文档中所有的文本。 当某个XML元素被解析时，其
现在我们做个在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()"> |
分享：AJAX：如何处理书签和后退按钮本文将展示一个开源JavaScript库，该脚本库给AJAX应用程序带来了书签和后退按钮支持。在学习完这个教程后，开发人员将能够获得对一个AJAX问题的解决方案（甚至连Google Maps和Gmail现在都不提供
- 相关链接：
- 教程说明：
Xml教程-XML卷之实战锦囊(4)：选单连动
。