Js实现省市县三级联动
完整源码下载地址：http://download.csdn.net/detail/software0116/4607607
JS代码：
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("province_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].getAttribute("value"))); //为option省节点设置属性 shengopt.setAttribute("value",provinces[i].getAttribute("code")); //添加省到页面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("code"); 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("value"))); //为option市节点设置属性 shiopt.setAttribute("value",cities[i].getAttribute("code")); //添加市到页面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("code"); 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("value"))); //为option区节点设置属性 xianopt.setAttribute("value", areas[k].getAttribute("code")); //添加区到页面dom对象中 xian.appendChild(xianopt); } } break; } } } } }}}HTML代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>city.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="provincesCity.js"></script> </head> <body> <select id="sheng" name="sheng" width="25"><option>--请选择--</option></select> <select id="shi" name="shi" width="25"><option>--请选择--</option></select> <select id="xian" name="xian" width="25"><option>--请选择--</option></select> </body></html>
部分XML：
<?xml version="1.0" encoding="gbk"?><country code="86" value="中国"><province code="370000" value="山东省"> <city code="370100" value="济南市"> <county code="370101" value="市辖区"/> <county code="370102" value="历下区"/> <county code="370103" value="市中区"/> <county code="370104" value="槐荫区"/> <county code="370105" value="天桥区"/> <county code="370112" value="历城区"/> <county code="370113" value="长清区"/> <county code="370124" value="平阴县"/> <county code="370125" value="济阳县"/> <county code="370126" value="商河县"/> <county code="370181" value="章丘市"/> </city> <city code="370200" value="青岛市"> <county code="370201" value="市辖区"/> <county code="370202" value="市南区"/> <county code="370203" value="市北区"/> <county code="370205" value="四方区"/> <county code="370211" value="黄岛区"/> <county code="370212" value="崂山区"/> <county code="370213" value="李沧区"/> <county code="370214" value="城阳区"/> <county code="370281" value="胶州市"/> <county code="370282" value="即墨市"/> <county code="370283" value="平度市"/> <county code="370284" value="胶南市"/> <county code="370285" value="莱西市"/> </city></province></country>