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 相关文章推荐
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
JavaScript从原型到原型链深入理解
Jun 03 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
Php图像处理类代码分享
2012/01/19 PHP
解析php中const与define的应用区别
2013/06/18 PHP
理解PHP中的stdClass类
2014/04/18 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
PHP递归算法的简单实例
2019/02/28 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
vue二级路由设置方法
2018/02/09 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
python使用nntp读取新闻组内容的方法
2015/05/08 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
销售业务员岗位职责
2014/01/29 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
机关单位动员会主持词
2014/03/20 职场文书
办公用房租赁协议书
2014/11/29 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书