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


Posted in Javascript onJuly 25, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
理解JavaScript中的事件
Sep 23 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 Javascript
javascript实现数字时钟效果
Feb 06 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 #Javascript
javascript实现信息增删改查的方法
Jul 25 #Javascript
jQuery菜单插件用法实例
Jul 25 #Javascript
javascript单例模式的简单实现方法
Jul 25 #Javascript
JavaScript类继承及实例化的方法
Jul 25 #Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 #Javascript
javascript去掉代码里面的注释
Jul 24 #Javascript
You might like
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
Python去除字符串两端空格的方法
2015/05/21 Python
Python通过select实现异步IO的方法
2015/06/04 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
python3安装speech语音模块的方法
2018/12/24 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
python 图片去噪的方法示例
2019/07/09 Python
Python中的类与类型示例详解
2019/07/10 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
献爱心捐款倡议书
2014/05/14 职场文书
我的中国梦口号
2014/06/16 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js