本文实例讲述了javascript解析xml实现省市县三级联动的方法。分享给大家供大家参考。具体实现方法如下：
（该方法适用于任何常用浏览器）
<body> <div> <span> <select id="sheng"></select> </span> <span> <select id="shi"></select> </span> <span> <select id="xian"></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程序设计有所帮助。