首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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解析xml实现省市县三级联动的方法

- Author -

whylyq

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 Javascript
原生JS实现天气预报
Jun 16 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
欢迎词(65) 心得体会(660) 演讲稿(869) 思想汇报(404) 创业计划书(312) 表扬信(62) 证婚词(21) 道歉信(39) 职业生涯规划书(234) 介绍信(57)
You might like
生成php程序的php代码
2008/04/07 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
PHP goto语句用法实例
2019/08/06 PHP
js表数据排序 sort table data
2009/02/18 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
Python类的基础入门知识
2008/11/24 Python
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
python模块之StringIO使用示例
2015/04/08 Python
Python常用库推荐
2016/12/04 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
高一英语教学反思
2014/01/22 职场文书
节能标语大全
2014/06/21 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
领导班子个人对照检查材料（群众路线）
2014/09/26 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
教师师德表现自我评价
2015/03/05 职场文书
检讨书格式
2015/05/07 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书