解析XML文件实现省市县三级级联下拉菜单 在我们做项目中难免会遇到这样的问题,当我们注册账号时需要填写详细地址,该地址往往设置省市县三个下拉菜单,这就需要我们考虑三个下拉菜单之间的级联关系。我们选择省之后该如何选择该省下的市呢?又该如何选择省下某个市的区(县)呢?曾经做项目中遇到过此类问题,这就是省、市、县、三级下拉菜单的。今天终于有时间研究了一下此问题,下面以实际案例阐述其原理。 1、以下是我简列出xml部分代码 <?xml version="1.0" encoding="UTF-8"?> <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> <province name="天津市" postcode="120000" > <city name="市辖区" postcode="120100" > <area name="和平区" postcode="120101" /> <area name="河东区" postcode="120102" /> <area name="河西区" postcode="120103" /> <area name="南开区" postcode="120104" /> <area name="河北区" postcode="120105" /> <area name="红桥区" postcode="120106" /> <area name="塘沽区" postcode="120107" /> <area name="汉沽区" postcode="120108" /> <area name="大港区" postcode="120109" /> <area name="东丽区" postcode="120110" /> <area name="西青区" postcode="120111" /> <area name="津南区" postcode="120112" /> <area name="北辰区" postcode="120113" /> <area name="武清区" postcode="120114" /> <area name="宝坻区" postcode="120115" /> </city> <city name="县" postcode="120200" > <area name="宁河县" postcode="120221" /> <area name="静海县" postcode="120223" /> <area name="蓟县" postcode="120225" /> </city> </province> //剩余代码省略……. </root> 2、列举出HTML部分代码 <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> 3、列举出全部Js中实现代码 <mce:script type="text/javascript"><!-- //获取xmlDoc对象 function getXmlDoc(){ var xmlDoc; try{ //IE浏览器 xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); }catch(err){ try{ //firefox 其他浏览器 xmlDoc = document.implementation.createDocument("","",null); }catch(er){ alert("您的浏览器版本太低........"); } } //关闭异步加载,确保在文档完全加载之前解析器不会继续脚本的执行 xmlDoc.async=false; //转载xml文件 xmlDoc.load("city.xml"); return xmlDoc; } window.onload = function (){ //通过方法获取对象 var xmlDoc = getXmlDoc(); //获取xml文件的根节点 var root = xmlDoc.documentElement; //获得所有的省节点 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++){ //查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题 if(provinces[i].nodeType ==1 ){ //创建option节点对象 var shengopt = document.createElement("option"); //为省节点添加文本节点 shengopt.appendChild(document.createTextNode(provinces[i].getAttribute("name"))); //为省节点添加属性 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++){ //查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题 if(provinces[i].nodeType ==1 ){ //获取xml中省节点中postcode的值 var postcode = provinces[i].getAttribute("postcode"); //比较xml中postcode的值是否与所选中的省的value获取其value值的内容相等 if(postcode==ppostcode){ //获取省下的所有的市节点 var cities = provinces[i].childNodes; //清空市 shi.length=0; //遍历市节点 for(var i=0;i<cities.length;i++){ //查看该节点是否是元素节点 if(cities[i].nodeType ==1){ //在市节点下创建option节点对象 var shiopt = document.createElement("option"); //添加文本节点 shiopt.appendChild(document.createTextNode(cities[i].getAttribute("name"))); //设置属性节点value shiopt.setAttribute("value",cities[i].getAttribute("postcode")); //在市节点下添加option节点 shi.appendChild(shiopt); } } break; } } } } shi.onchange = function(){ var shis = shi.options; var num = shis.selectedIndex; var spostcode = shis[num].getAttribute("value"); //遍历所有的省 for(var i=0;i<provinces.length;i++){ //查看该节点是否是元素节点 if(provinces[i].nodeType==1){ //获取省下的所有市节点 var cities = provinces[i].childNodes; //遍历所有市节点 for(var j=0;j<cities.length;j++){ //查看该市节点是否是元素节点 if(cities[j].nodeType==1){ //获取xml中市节点中postcode的值 var postcode = cities[j].getAttribute("postcode"); //比较xml中postcode的值是否与所选中的市的value获取其value值的内容相等 if(postcode == spostcode){ //清空县 xian.length=0; //获取市下所有县(区)节点 var areas = cities[j].childNodes; //遍历区(县)节点 for(var k=0;k<areas.length;k++){ //查看该节点中是否是元素节点 if(areas[k].nodeType == 1){ //获取option对象 var xianopt = document.createElement("option"); //添加文本节点 xianopt.appendChild(document.createTextNode(areas[k].getAttribute("name"))); //添加属性节点 xianopt.setAttribute("value",areas[k].getAttribute("postcode")); //将县的option节点添加到县节点中 xian.appendChild(xianopt); } } break; } } } } } } } // --></mce:script> 以上每行代码都有注释,请详细分析!我国各省市县名称列表请详查: http://blog.csdn.net/DXL_xiaoli/archive/2011/03/22/6269077.aspx