本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
