javascript解析xml实现省市县三级联动的方法

前端技术 2023/09/02 JavaScript

本文实例讲述了javascript解析xml实现省市县三级联动的方法。分享给大家供大家参考。具体实现方法如下：

（该方法适用于任何常用浏览器）

<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>
</html>
<script type=\"text/javascript\">
<!--
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文件（简写版）

<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>
</root>

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/3920

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案