首頁 > 開發者 > JavaScript
javascript解析xml實現省市縣三級聯動的方法，javascriptxml
本文執行個體講述了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程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
