麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 語言 > 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程序設計有所幫助。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表

圖片精選

主站蜘蛛池模板： 一本色道久久综合亚洲精品图片 | www久久综合 | 色就色 综合偷拍区91网 | 国产精品视频专区 | 91精品免费在线 | 在线观看免费av网 | 成人午夜天堂 | 国产青草视频在线观看视频 | www.99av| 综合精品久久 | 一级性色 | 久久久无码精品亚洲日韩按摩 | 久久久久久亚洲综合影院红桃 | 日本一道aⅴ不卡免费播放 久久久久久久高清 | 亚洲黑人在线观看 | 国产精品视频一区二区三区综合 | 视频一区二区中文字幕 | 国产免费区| 国产成人自拍av | 日本黄色一级毛片 | 久久精品国产99国产精品澳门 | 亚洲成人在线视频网站 | 成人福利电影在线观看 | 日本黄色一级视频 | 亚洲影院在线 | 久久久久亚洲视频 | 亚洲va久久久噜噜噜久牛牛影视 | av中文在线观看 | 黄色视屏免费在线观看 | 欧美亚洲国产日韩 | 91成人久久 | 国产精品成人亚洲一区二区 | 国产亚洲精品久久午夜玫瑰园 | 深夜精品福利 | 麻豆视频免费网站 | 成人免费看视频 | 草莓福利社区在线 | 国产一区精品视频 | 美女污污在线观看 | 亚洲成人国产综合 | 久久激情免费视频 |