XML实战秘籍第四卷：选单连动

互联网 17-3-19

[导读] 现在我们做个在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实战秘籍第四卷：选单连动的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：视频教程