javascript解析xml实现省市县三级联动的方法
本文实例讲述了javascript解析xml实现省市县三级联动的方法。分享给大家供大家参考。具体实现方法如下：
（该方法适用于任何常用浏览器）
<body>
<div>
<span>
<selectid="sheng"style="width:100px"></select>
</span>
<span>
<selectid="shi"style="width:100px"></select>
</span>
<span>
<selectid="xian"style="width:100px"></select>
</span>
</div>
</body>
</html>
<scripttype="text/javascript">
<!--
functiongetXmlDoc(){
varxmlDoc;
try{
//给IE浏览器创建一个空的微软XML文档对象
xmlDoc=newActiveXObject("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");
returnxmlDoc;
}
window.onload=function(){
varxmlDoc=getXmlDoc();
//获取xml文件的根节点
varroot=xmlDoc.documentElement;
//获取xml文件的根节点下面的省节点
varprovinces=root.childNodes;
//获取页面中要显示的省、市和县的控件dom对象
varsheng=document.getElementById("sheng");
varshi=document.getElementById("shi");
varxian=document.getElementById("xian");
//遍历所有的省
for(vari=0;i<provinces.length;i++){
//查看该节点是否是元素节点也是为了实现不同浏览器之间的兼容性问题(1是元素节点Node.ELEMENT_NODE---1--元素节点)
if(provinces[i].nodeType==1){
//创建一个option节点对象
varshengopt=document.createElement("option");
//为option省节点添加文本shengopt.appendChild(document.createTextNode(provinces[i].getAttribute("name")));
//为option省节点设置属性shengopt.setAttribute("value",provinces[i].getAttribute("postcode"));
//添加省到页面dom对象中
sheng.appendChild(shengopt);
}
}
//当省节点发生改变时触发事件
sheng.onchange=function(){
//获取省节点所有的option对象的集合
varshengs=sheng.options;
//获取选中option对象的selectedIndex(下标值)
varnum=shengs.selectedIndex;
//清空市区
shi.length=0;
xian.length=0;
//根据选中的省获取其value值的内容即xml文件中的postcode对应的值
varppostcode=shengs[num].getAttribute("value");
//遍历所有的省
for(vari=0;i<provinces.length;i++){
//查看该节点是否是元素节点也是为了实现不同浏览器之间的兼容性问题(1是元素节点Node.ELEMENT_NODE---1--元素节点)
if(provinces[i].nodeType==1){
//根据省获取其postcode值的内容即html文件中的value对应的值
varpostcode=provinces[i].getAttribute("postcode");
if(postcode==ppostcode){
//获取省节点的子节点
varcities=provinces[i].childNodes;
//清空
shi.length=0;
//遍历所有的市
for(vari=0;i<cities.length;i++){
//查看该节点是否是元素节点也是为了实现不同浏览器之间的兼容性问题(1是元素节点Node.ELEMENT_NODE---1--元素节点)
if(cities[i].nodeType==1){
//创建一个option节点对象
varshiopt=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对象的集合
varshis=shi.options;
//获取选中option对象的selectedIndex(下标值)
varnum=shis.selectedIndex;
//根据选中的市获取其value值的内容即xml文件中的postcode对应的值
varspostcode=shis[num].getAttribute("value");
//遍历所有的省
for(vari=0;i<provinces.length;i++){
//查看该节点是否是元素节点也是为了实现不同浏览器之间的兼容性问题(1是元素节点Node.ELEMENT_NODE---1--元素节点)
if(provinces[i].nodeType==1){
//获取省节点的子节点
varcities=provinces[i].childNodes;
//遍历所有的市
for(varj=0;j<cities.length;j++){
//查看该节点是否是元素节点也是为了实现不同浏览器之间的兼容性问题(1是元素节点Node.ELEMENT_NODE---1--元素节点)
if(cities[j].nodeType==1){
//根据市获取其postcode值的内容即html文件中的value对应的值
varpostcode=cities[j].getAttribute("postcode");
if(postcode==spostcode){
//清空
xian.length=0;
//获取市节点的子节点
varareas=cities[j].childNodes;
//遍历所有的区(县)
for(vark=0;k<areas.length;k++){
//查看该节点是否是元素节点也是为了实现不同浏览器之间的兼容性问题(1是元素节点Node.ELEMENT_NODE---1--元素节点)
if(areas[k].nodeType==1){
//创建一个option节点对象
varxianopt=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文件（简写版）
<rootname="中国"> <provincename="请选择省"postcode="100000"> <cityname="请选择市"postcode="100100"> <areaname="请选择区"postcode="100101"/> </city> </province> <provincename="北京市"postcode="110000"> <cityname="市辖区"postcode="110100"> <areaname="东城区"postcode="110101"/> <areaname="西城区"postcode="110102"/> <areaname="崇文区"postcode="110103"/> <areaname="宣武区"postcode="110104"/> <areaname="朝阳区"postcode="110105"/> <areaname="丰台区"postcode="110106"/> <areaname="石景山区"postcode="110107"/> <areaname="海淀区"postcode="110108"/> <areaname="门头沟区"postcode="110109"/> <areaname="房山区"postcode="110111"/> <areaname="通州区"postcode="110112"/> <areaname="顺义区"postcode="110113"/> <areaname="昌平区"postcode="110114"/> <areaname="大兴区"postcode="110115"/> <areaname="怀柔区"postcode="110116"/> <areaname="平谷区"postcode="110117"/> </city> <cityname="县"postcode="110200"> <areaname="密云县"postcode="110228"/> <areaname="延庆县"postcode="110229"/> </city> </province> </root>
希望本文所述对大家的javascript程序设计有所帮助。