JavaScript XML省市县三级联动下拉菜单
发布时间:01/15 来源: 浏览:
关键词:
以前我们写的都是把省市县写在了js数组中然后再讲出来,那样的如果有更新就很麻烦了,下面我介绍一个xml+js实现的省市县三级联动下拉菜单效果,大家可参考。
js代码
代码如下 | |
<html> <head runat="server"> <title>省市县三级联动菜单</title> <script language="javascript" type="text/javascript"> //首先需要初始化 var xmlDoc; var nodeIndex; function getxmlDoc() { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); var currNode; xmlDoc.async=false; xmlDoc.load("Area.xml"); if(xmlDoc.parseError.errorCode!=0) { var myErr=xmlDoc.parseError; alert("出错!"+myErr.reason); } } function Init() { //打开xlmdocm文档 getxmlDoc(); var dropElement1=document.getElementById("Select1"); var dropElement2=document.getElementById("Select2"); var dropElement3=document.getElementById("Select3"); RemoveDropDownList(dropElement1); RemoveDropDownList(dropElement2); RemoveDropDownList(dropElement3); var TopnodeList=xmlDoc.selectSingleNode("address").childNodes; if(TopnodeList.length>0) { //省份列表 var country; var province; var city; for(var i=0; i<TopnodeList.length; i++) { //添加列表项目 country=TopnodeList[i]; var eOption=document.createElement("option"); eOption.value=country.getAttribute("name"); eOption.text=country.getAttribute("name"); dropElement1.add(eOption); } if(TopnodeList[0].childNodes.length>0) { //城市列表 for(var i=0;i<TopnodeList[0].childNodes.length;i++) { var id=dropElement1.options[0].value; //默认为第一个省份的城市 province=TopnodeList[0]; var eOption=document.createElement("option"); eOption.value=province.childNodes[i].getAttribute("name"); eOption.text=province.childNodes[i].getAttribute("name"); dropElement2.add(eOption); } if(TopnodeList[0].childNodes[0].childNodes.length>0) { //县列表 for(var i=0;i<TopnodeList[0].childNodes[0].childNodes.length;i++) { var id=dropElement2.options[0].value; //默认为第一个城市的第一个县列表 city=TopnodeList[0].childNodes[0]; var eOption=document.createElement("option"); eOption.value=city.childNodes[i].getAttribute("name"); eOption.text=city.childNodes[i].getAttribute("name"); this.document.getElementById("Select3").add(eOption); } } } } } function selectCity() { var dropElement1=document.getElementById("Select1"); var name=dropElement1.options[dropElement1.selectedIndex].value; //alert(id); var countryNodes=xmlDoc.selectSingleNode('//address/province [@name="'+name+'"]'); //alert(countryNodes.childNodes.length); var province=document.getElementById("Select2"); var city=document.getElementById("Select3"); RemoveDropDownList(province); RemoveDropDownList(city); if(countryNodes.childNodes.length>0) { //填充城市 for(var i=0; i<countryNodes.childNodes.length; i++) { var provinceNode=countryNodes.childNodes[i]; var eOption=document.createElement("option"); eOption.value=provinceNode.getAttribute("name"); eOption.text=provinceNode.getAttribute("name"); province.add(eOption); } if(countryNodes.childNodes[0].childNodes.length>0) { //填充选择省份的第一个城市的县列表 for(var i=0;i<countryNodes.childNodes[0].childNodes.length;i++) { //alert("i="+i+"rn"+"length="+countryNodes.childNodes[0].childNodes.length+"rn"); var dropElement2=document.getElementById("Select2"); var dropElement3=document.getElementById("Select3"); //取当天省份下第一个城市列表 var cityNode=countryNodes.childNodes[0]; //alert(cityNode.childNodes.length); var eOption=document.createElement("option"); eOption.value=cityNode.childNodes[i].getAttribute("name"); eOption.text=cityNode.childNodes[i].getAttribute("name"); dropElement3.add(eOption); } } } } function selectCountry() { var dropElement2=document.getElementById("Select2"); var name=dropElement2.options[dropElement2.selectedIndex].value; var provinceNode=xmlDoc.selectSingleNode('//address/province/city[@name="'+name+'"]'); var city=document.getElementById("Select3"); RemoveDropDownList(city); for(var i=0; i<provinceNode.childNodes.length; i++) { var cityNode=provinceNode.childNodes[i]; var eOption=document.createElement("option"); eOption.value=cityNode.getAttribute("name"); eOption.text=cityNode.getAttribute("name"); city.add(eOption); } } function RemoveDropDownList(obj) { if(obj) { var len=obj.options.length; if(len>0) { //alert(len); for(var i=len;i>=0;i--) { obj.remove(i); } } } } </script> </head> <body onload="Init();"> <form id="form1" runat="server"> <div> <select id="Select1" name="Select1" runat="server" onchange="selectCity();"> <option value="" selected="true">省/直辖市</option> </select> <select id="Select2" name="Select2" runat="server" onchange="selectCountry()"> <option value="" selected="true">请选择</option> </select> <select id="Select3" name="Select3" runat="server" > <option value="" selected="true">请选择</option> </select> </div> </form> </body> </html> |
xml文件
代码如下 | |
<?xml version="1.0" encoding="gb2312" ?> <address> <province name="北京市"> <city name="北京辖区"> <country name="东城区" /> <country name="西城区" /> <country name="崇文区" /> <country name="宣武区" /> <country name="朝阳区" /> <country name="丰台区" /> <country name="石景山区" /> <country name="海淀区" /> <country name="门头沟区" /> <country name="房山区" /> <country name="通州区" /> <country name="顺义区" /> <country name="昌平区" /> <country name="大兴区" /> <country name="怀柔区" /> <country name="平谷区" /> </city> <city name="北京辖县"> <country name="密云县" /> <country name="延庆县" /> </city> </province> <province name="天津市"> <city name="天津辖区"> <country name="和平区" /> <country name="河东区" /> <country name="河西区" /> <country name="南开区" /> <country name="河北区" /> <country name="红桥区" /> <country name="塘沽区" /> <country name="汉沽区" /> <country name="大港区" /> <country name="东丽区" /> <country name="西青区" /> <country name="津南区" /> <country name="北辰区" /> <country name="武清区" /> <country name="宝坻区" /> </city> <province name="台湾省" /> <province name="香港特区" /> <province name="澳门特区" /> </address> |
这里我只加了几个城市更多城市大家可以按这xml规则自己来加哦。