javascript解析xml实现省市县三级联动的方法

2019-11-20 11:59:54

字体：大中小

来源：转载

供稿：网友

本文实例讲述了javascript解析xml实现省市县三级联动的方法。分享给大家供大家参考。具体实现方法如下：

（该方法适用于任何常用浏览器）

<body>  <div>  <span>   <select id="sheng" style="width: 100px"></select>  </span>  <span>   <select id="shi" style="width: 100px"></select>  </span>  <span>   <select id="xian" style="width: 100px"></select>  </span>  </div> </body></html><script type="text/javascript"><!--function getXmlDoc(){var xmlDoc;try{//给IE浏览器 创建一个空的微软 XML文档对象xmlDoc=new ActiveXObject("Microsoft.XMLDOM");}catch(err){try{//在 Firefox及其他浏览器(opera)中的 XML解析器创建一个空的 XML文档对象。 xmlDoc=document.implementation.createDocument("","",null);}catch(er){alert("所使用的浏览器版本太低了,该换更新了");}}//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行xmlDoc.async=false;//解析器加载名为 "xxx.xml" 的 XML 文档xmlDoc.load("city.xml");return xmlDoc;}window.onload=function(){var xmlDoc=getXmlDoc();//获取xml文件的根节点var root=xmlDoc.documentElement;//获取xml文件的根节点下面的省节点var provinces=root.childNodes;//获取页面中要显示的省、市和县的控件dom对象var sheng=document.getElementById("sheng");var shi=document.getElementById("shi");var xian=document.getElementById("xian"); //遍历所有的省 for(var i=0;i<provinces.length;i++){ //查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性 问 题(1是元素节点 Node.ELEMENT_NODE  ---1  -- 元素节点)if(provinces[i].nodeType==1){//创建一个option节点对象var shengopt=document.createElement("option");//为option省节点添加文本 shengopt.appendChild(document.createTextNode(provinces[i].getAttr ibute("name")));//为option省节点设置属性 shengopt.setAttribute("value",provinces[i].getAttribute("postcode "));  //添加省到页面dom对象中sheng.appendChild(shengopt);}}//当省节点发生改变时 触发事件sheng.onchange=function(){//获取省节点所有的option对象的集合var shengs=sheng.options;//获取选中option对象的selectedIndex(下标值)var num=shengs.selectedIndex;//清空市 区  shi.length=0;xian.length=0;//根据选中的省获取其value值的内容 即xml文件中的postcode对应的 值var ppostcode=shengs[num].getAttribute("value");//遍历所有的省for(var i=0;i<provinces.length;i++){//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼 容性问题(1是元素节点 Node.ELEMENT_NODE  ---1  -- 元素 节点)if(provinces[i].nodeType==1){//根据省获取其postcode值的内容 即html文件中的value对应 的值var postcode=provinces[i].getAttribute("postcode");if(postcode==ppostcode){//获取省节点的子节点var cities=provinces[i].childNodes;//清空shi.length=0;//遍历所有的市for(var i=0;i<cities.length;i++){//查看该节点是否是元素节点 也是为了实现不同浏览 器之间的兼容性问题(1是元素节点 Node.ELEMENT_NODE  ---1  -- 元素节点)if(cities[i].nodeType==1){//创建一个option节点对象var shiopt=document.createElement("option");//为option市节点添加文本 shiopt.appendChild(document.createTextNode(cities[i].getAttribute ("name")));//为option市节点设置属性shiopt.setAttribute("value", cities[i].getAttribute("postcode")); //添加市到页面dom对象中shi.appendChild(shiopt);}}break;}}}}//当市节点发生改变时 触发事件shi.onchange=function(){//获取市节点所有的option对象的集合var shis=shi.options;//获取选中option对象的selectedIndex(下标值)var num=shis.selectedIndex;//根据选中的市获取其value值的内容 即xml文件中的postcode对应的 值var spostcode=shis[num].getAttribute("value");//遍历所有的省for(var i=0;i<provinces.length;i++){//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼 容性问题(1是元素节点 Node.ELEMENT_NODE  ---1  -- 元素 节点)if(provinces[i].nodeType==1){//获取省节点的子节点var cities=provinces[i].childNodes;//遍历所有的市for(var j=0;j<cities.length;j++){//查看该节点是否是元素节点 也是为了实现不同浏览器之 间的兼容性问题(1是元素节点 Node.ELEMENT_NODE   ---1  -- 元素节点)if(cities[j].nodeType==1){//根据市获取其postcode值的内容 即html文件中的 value对应的值var postcode=cities[j].getAttribute("postcode");if(postcode==spostcode){//清空xian.length=0;//获取市节点的子节点var areas=cities[j].childNodes;//遍历所有的区(县)for(var k=0;k<areas.length;k++){//查看该节点是否是元素节点 也是为了实现不 同浏览器之间的兼容性问题(1是元素节点 Node.ELEMENT_NODE  ---1  -- 元素节点)if(areas[k].nodeType==1){//创建一个option节点对象var xianopt=document.createElement("option");//为option区节点添加文本xianopt.appendChild(document.createTextNode(areas[k].getAttribute ("name")));//为option区节点设置属性xianopt.setAttribute("value", areas[k].getAttribute("postcode")); //添加区到页面dom对象中xian.appendChild(xianopt);}}break;}}}}}}}//--></script>

Xml文件（简写版）

<root name="中国"> <province name="请选择省" postcode="100000" >  <city name="请选择市" postcode="100100" > <area name="请选择区" postcode="100101" /></city> </province> <province name="北京市" postcode="110000" >  <city name="市辖区" postcode="110100" >    <area name="东城区" postcode="110101" />    <area name="西城区" postcode="110102" />    <area name="崇文区" postcode="110103" />    <area name="宣武区" postcode="110104" />    <area name="朝阳区" postcode="110105" />    <area name="丰台区" postcode="110106" />    <area name="石景山区" postcode="110107" />    <area name="海淀区" postcode="110108" />    <area name="门头沟区" postcode="110109" />    <area name="房山区" postcode="110111" />    <area name="通州区" postcode="110112" />    <area name="顺义区" postcode="110113" />    <area name="昌平区" postcode="110114" />    <area name="大兴区" postcode="110115" />    <area name="怀柔区" postcode="110116" />    <area name="平谷区" postcode="110117" />  </city>  <city name="县" postcode="110200" >    <area name="密云县" postcode="110228" />    <area name="延庆县" postcode="110229" />  </city> </province></root>

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：javascript页面倒计时实例

下一篇：基于javascript实现单选及多选的向右和向左移动实例