以前在項目中實現二級聯動是通過單純的JS方法，在對JS的深度瞭解中發現通過JSDom載入寫好的XML檔案也可以實現二級聯動，這也不失為一種好的方法，下面就跟大家分享一下。
首先，我們來看下要呈現的效果：
好，我們來看下需要的一個簡單的XML檔案：
我們可以看到該XML文檔有三層：
根節點：cities
子節點：province
子節點：city
Province節點擁有一個Name屬性
下面我們來看下JS的源碼：
window.onload = function (){<br /> //建立微軟XML解析控制項對象<br /> var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");<br /> //獲得省的選擇框對象節點<br /> var province = document.getElementById("province");<br /> //獲得市的選擇框對象節點<br /> var city = document.getElementById("city");<br /> //設定非同步關閉<br /> xmlDoc.async = "false";<br /> //載入XML檔案<br /> xmlDoc.load("cities.xml");<br /> //獲得XML檔案標籤名為province的對象節點<br /> var txt = xmlDoc.getElementsByTagName("province");<br /> //使用迴圈將獲得的省的名稱加入province的選擇框中<br /> for(var i=0;i<txt.length;i++){<br /> //獲得province標籤屬性名稱<br /> var name = txt[i].getAttribute("name");<br /> //建立option節點對象<br /> var p = document.createElement("option");<br /> //將文本節點添加到option對象中<br /> p.appendChild(document.createTextNode(name));<br /> //將對象添加到省選擇框的對象節點中<br /> province.appendChild(p);<br /> }<br /> //當province文字框中的值發生改變時觸發以下事件<br /> province.onchange = function (){<br /> //獲得省的所有選項<br /> var prces = province.options;<br /> //獲得選中選項<br /> var selected = prces[prces.selectedIndex];<br /> //獲得選中項的文本值<br /> var sedname = selected.innerHTML;</p><p> /*迴圈添加省的子城市到city選擇框*/<br /> for(var i=0;i<txt.length;i++){<br /> //獲得XML文檔中省的name<br /> var name = txt[i].getAttribute("name");<br /> //判斷選中選項的省是否與XML文檔中提取到得省的name是否相同<br /> if(sedname==name){<br /> //在聯動之前設定其中選項長度，為了使請選擇選項始終顯示所以長度設定為1<br /> /*注意：這裡只是設定了下拉選擇框的長度，等同於把其中的固定下標的元素隱藏，並不等同於刪除其中的元素*/<br /> city.length=1;<br /> //獲得其中省的節點<br /> var cities = txt[i];<br /> //獲得省的節點的子節點、也就是省內的城市<br /> var cy = cities.childNodes;<br /> /*迴圈添加城市節點*/<br /> for(var j=0;j<cy.length;j++){<br /> //建立option元素節點<br /> var nopt = document.createElement("option");<br /> //將獲得的城市節點的文本添加到該元素節點中<br /> nopt.appendChild(document.createTextNode(cy[j].childNodes[0].nodeValue));<br /> //添加到下拉框節點中<br /> city.appendChild(nopt);<br /> }<br /> }<br /> }<br /> }<br />}
HTML源碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>省市聯動</title><br /></head><br /><body><br /><select id="province" style="width:100px; background:#CCC;"><br /><option>--請選擇省--</option><br /></select><br /><select id="city" style="width:100px; background:#CCC;"><br /><option>--請選擇市--</option><br /></select><br /></body><br /><mce:script type="text/javascript" src="city.js" mce_src="city.js"></mce:script><br /></html>
注意：這段js指令碼代碼僅支援IE瀏覽器（本人使用IE9測試），還有其中的XML載入路徑，我的是預設在本站也就是同一個檔案夾內；
此外，當再次點擊“請選擇省“這個選項時，右側市的選擇框會停留在你上一次點擊的省的下屬市上不會做改變，這也算一個小小的bug吧，大家見諒，有解決的請回複我。
本文著作權，轉載請註明出處。
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
