首页 > 语言 > JavaScript > 正文

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

2024-05-06 16:23:42
字体：大 中 小
来源：转载
供稿：网友

这篇文章主要介绍了javascript解析xml实现省市县三级联动的方法,涉及javascript针对节点的操作与XML文件解析的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

(该方法适用于任何常用浏览器)

 

 
  1. <body> 
  2. <div> 
  3. <span> 
  4. <select id="sheng" style="width: 100px"></select> 
  5. </span> 
  6. <span> 
  7. <select id="shi" style="width: 100px"></select> 
  8. </span> 
  9. <span> 
  10. <select id="xian" style="width: 100px"></select> 
  11. </span> 
  12. </div> 
  13. </body> 
  14. </html> 
  15. <script type="text/javascript"> 
  16. <!-- 
  17. function getXmlDoc(){ 
  18. var xmlDoc; 
  19. try{ 
  20. //给IE浏览器 创建一个空的微软 XML文档对象 
  21. xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
  22. }catch(err){ 
  23. try{ 
  24. //在 Firefox及其他浏览器(opera)中的 XML解析器创建一个空的 XML文档对象。  
  25. xmlDoc=document.implementation.createDocument("","",null); 
  26. }catch(er){ 
  27. alert("所使用的浏览器版本太低了,该换更新了"); 
  28. } 
  29. } 
  30. //关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行 
  31. xmlDoc.async=false; 
  32. //解析器加载名为 "xxx.xml" 的 XML 文档 
  33. xmlDoc.load("city.xml"); 
  34. return xmlDoc; 
  35. } 
  36. window.onload=function(){ 
  37. var xmlDoc=getXmlDoc(); 
  38. //获取xml文件的根节点 
  39. var root=xmlDoc.documentElement; 
  40. //获取xml文件的根节点下面的省节点 
  41. var provinces=root.childNodes; 
  42. //获取页面中要显示的省、市和县的控件dom对象 
  43. var sheng=document.getElementById("sheng"); 
  44. var shi=document.getElementById("shi"); 
  45. var xian=document.getElementById("xian"); 
  46. //遍历所有的省  
  47. for(var i=0;i<provinces.length;i++){ 
  48. //查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性 问 题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素节点) 
  49. if(provinces[i].nodeType==1){ 
  50. //创建一个option节点对象 
  51. var shengopt=document.createElement("option"); 
  52. //为option省节点添加文本 shengopt.appendChild(document.createTextNode(provinces[i].getAttr ibute("name"))); 
  53. //为option省节点设置属性 shengopt.setAttribute("value",provinces[i].getAttribute("postcode ")); 
  54. //添加省到页面dom对象中 
  55. sheng.appendChild(shengopt); 
  56. } 
  57. } 
  58. //当省节点发生改变时 触发事件 
  59. sheng.onchange=function(){ 
  60. //获取省节点所有的option对象的集合 
  61. var shengs=sheng.options; 
  62. //获取选中option对象的selectedIndex(下标值) 
  63. var num=shengs.selectedIndex; 
  64. //清空市 区  
  65. shi.length=0; 
  66. xian.length=0; 
  67. //根据选中的省获取其value值的内容 即xml文件中的postcode对应的 值 
  68. var ppostcode=shengs[num].getAttribute("value"); 
  69. //遍历所有的省 
  70. for(var i=0;i<provinces.length;i++){ 
  71. //查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼 容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素 节点) 
  72. if(provinces[i].nodeType==1){ 
  73. //根据省获取其postcode值的内容 即html文件中的value对应 的值 
  74. var postcode=provinces[i].getAttribute("postcode"); 
  75. if(postcode==ppostcode){ 
  76. //获取省节点的子节点 
  77. var cities=provinces[i].childNodes; 
  78. //清空 
  79. shi.length=0; 
  80. //遍历所有的市 
  81. for(var i=0;i<cities.length;i++){ 
  82. //查看该节点是否是元素节点 也是为了实现不同浏览 器之间的兼容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素节点) 
  83. if(cities[i].nodeType==1){ 
  84. //创建一个option节点对象 
  85. var shiopt=document.createElement("option"); 
  86. //为option市节点添加文本 shiopt.appendChild(document.createTextNode(cities[i].getAttribute ("name"))); 
  87. //为option市节点设置属性 
  88. shiopt.setAttribute("value", cities[i].getAttribute("postcode")); 
  89. //添加市到页面dom对象中 
  90. shi.appendChild(shiopt); 
  91. } 
  92. } 
  93. break; 
  94. } 
  95. } 
  96. } 
  97. } 
  98. //当市节点发生改变时 触发事件 
  99. shi.onchange=function(){ 
  100. //获取市节点所有的option对象的集合 
  101. var shis=shi.options; 
  102. //获取选中option对象的selectedIndex(下标值) 
  103. var num=shis.selectedIndex; 
  104. //根据选中的市获取其value值的内容 即xml文件中的postcode对应的 值 
  105. var spostcode=shis[num].getAttribute("value"); 
  106. //遍历所有的省 
  107. for(var i=0;i<provinces.length;i++){ 
  108. //查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼 容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素 节点) 
  109. if(provinces[i].nodeType==1){ 
  110. //获取省节点的子节点 
  111. var cities=provinces[i].childNodes; 
  112. //遍历所有的市 
  113. for(var j=0;j<cities.length;j++){ 
  114. //查看该节点是否是元素节点 也是为了实现不同浏览器之 间的兼容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素节点) 
  115. if(cities[j].nodeType==1){ 
  116. //根据市获取其postcode值的内容 即html文件中的 value对应的值 
  117. var postcode=cities[j].getAttribute("postcode"); 
  118. if(postcode==spostcode){ 
  119. //清空 
  120. xian.length=0; 
  121. //获取市节点的子节点 
  122. var areas=cities[j].childNodes; 
  123. //遍历所有的区(县) 
  124. for(var k=0;k<areas.length;k++){ 
  125. //查看该节点是否是元素节点 也是为了实现不 同浏览器之间的兼容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素节点) 
  126. if(areas[k].nodeType==1){ 
  127. //创建一个option节点对象 
  128. var xianopt=document.createElement("option"); 
  129. //为option区节点添加文本 
  130. xianopt.appendChild(document.createTextNode(areas[k].getAttribute ("name"))); 
  131. //为option区节点设置属性 
  132. xianopt.setAttribute("value", areas[k].getAttribute("postcode")); 
  133. //添加区到页面dom对象中 
  134. xian.appendChild(xianopt); 
  135. } 
  136. } 
  137. break; 
  138. } 
  139. } 
  140. } 
  141. } 
  142. } 
  143. } 
  144. } 
  145. //--> 
  146. </script> 

Xml文件(简写版)

 

 
  1. <root name="中国"> 
  2. <province name="请选择省" postcode="100000" > 
  3. <city name="请选择市" postcode="100100" > 
  4. <area name="请选择区" postcode="100101" /> 
  5. </city> 
  6. </province> 
  7. <province name="北京市" postcode="110000" > 
  8. <city name="市辖区" postcode="110100" > 
  9. <area name="东城区" postcode="110101" /> 
  10. <area name="西城区" postcode="110102" /> 
  11. <area name="崇文区" postcode="110103" /> 
  12. <area name="宣武区" postcode="110104" /> 
  13. <area name="朝阳区" postcode="110105" /> 
  14. <area name="丰台区" postcode="110106" /> 
  15. <area name="石景山区" postcode="110107" /> 
  16. <area name="海淀区" postcode="110108" /> 
  17. <area name="门头沟区" postcode="110109" /> 
  18. <area name="房山区" postcode="110111" /> 
  19. <area name="通州区" postcode="110112" /> 
  20. <area name="顺义区" postcode="110113" /> 
  21. <area name="昌平区" postcode="110114" /> 
  22. <area name="大兴区" postcode="110115" /> 
  23. <area name="怀柔区" postcode="110116" /> 
  24. <area name="平谷区" postcode="110117" /> 
  25. </city> 
  26. <city name="县" postcode="110200" > 
  27. <area name="密云县" postcode="110228" /> 
  28. <area name="延庆县" postcode="110229" /> 
  29. </city> 
  30. </province> 
  31. </root> 

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

上一篇：jQuery菜单插件用法实例

下一篇：基于javascript实现单选及多选的向右和向左移动实例

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿 创2023年5月以来最大单周涨幅
2024-04-27 13:35:46
雷军：小米正在申请3万件专利，以提升自身的竞争力
2024-04-27 13:33:47
人参泡酒15年后竟“复活”？网友：这酒还能喝不？
2024-04-24 22:53:44
芯片股普涨！英伟达市值一夜大涨6000亿元
2024-04-23 19:32:50
面馆老板1天卖100碗刚够交房租 要卖到150碗才能实现盈利
2024-04-23 19:25:50
跌近30%！茶百道上市一小时跌没3年净利润
2024-04-23 19:13:19

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有