使用javascript解析xml实现省市县三级联动

来源：互联网发布：九游软件下载编辑：程序博客网时间：2024/04/28 04:12

（适用于任何常用浏览器）

<body>

<div>

<span>

</span>

<span>

</span>

<span>

</span>

</div>

</body>

</html>

<!--

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文件（简写版）

</city>

</province>

</city>

</city>

</province>

</root>