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

这篇文章主要介绍了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程序设计有所帮助。