構建省份城市級聯

最近聽到很多朋友問關於級聯的例子

現在有空就簡單的寫下

數據存取用的是 xml 文件（也是一個小型數據庫哦）

用有些地方用到jquery

下面給出代碼

js代碼

$().ready(function(){ //加載省份數據 var xml = new ActiveXObject("Msxml2.DOMDocument"); //關閉異步加載，在文檔完整加載之前，解析器不會繼續執行腳本 xml.async = false; xml.load("Province.xml"); //加載城市數據 xmlcity = new ActiveXObject("Msxml2.DOMDocument"); //開啓異步加載，在文檔完整加載之前，解析器會繼續執行腳本 xmlcity.async = true; xmlcity.load("city.xml"); var ProvinceDOM = document.getElementById("ProvinceId"); var cityDOM = document.getElementById("cityId"); //獲得省份 var Provinces = xml.getElementsByTagName("Province"); var ProvinceLength = Provinces.length; for(var j=0;j<ProvinceLength;j++) { ProvinceDOM.options.add(createOption(Provinces[j].getAttribute("id"),Provinces[j].childNodes(0).text)); } $("#ProvinceId").change(function(){ //在獲得對應的城市之前先清空之前的城市選項 clearOption(); //用xpath取出對應與選擇省的城市 var xmlvalue=xmlcity.getElementsByTagName("city[@ProvinceId='"+$(this).attr("value")+"']"); for(var i=0;i<xmlvalue.length;i++) { var va = xmlvalue[i].getAttribute("id");//值 var te = xmlvalue[i].childNodes(0).text;//文本 cityDOM.options.add(createOption(va,te)); } }); }); //構造下拉框項 function createOption(value,text) { var op = new Option(); op.value = value; op.text = text; return op; } //清空城市項 function clearOption() { $("#cityId").html(""); }

html 

選擇省 <select id="ProvinceId"> <option value="0">===請選擇===</option> </select> 城市： <select id="cityId"> </select>

接下來 看看兩個主要的xml文件

Province.xml 文件的期望格式如下

<?xml version="1.0" encoding="utf-8" ?> <Provinces> <Province id="1"> <name>浙江省</name> </Province> <Province id="2"> <name>江蘇省</name> </Province> </Provinces>

city.xml的期望格式如下

<?xml version="1.0" encoding="utf-8" ?> <citys> <city id="1" ProvinceId="1"> <name>紹興</name> </city> <city id="2" ProvinceId="1"> <name>嘉興</name> </city> <city id="3" ProvinceId="1"> <name>杭州</name> </city> <city id="4" ProvinceId="1"> <name>寧波</name> </city> <city id="5" ProvinceId="1"> <name>金華</name> </city> <city id="6" ProvinceId="2"> <name>南通市</name> </city> <city id="7" ProvinceId="2"> <name>南京市</name> </city> <city id="8" ProvinceId="2"> <name>徐州市</name> </city> <city id="9" ProvinceId="2"> <name>連雲港市</name> </city> <city id="10" ProvinceId="2"> <name>淮安市</name> </city> </citys>

 

基本的程序就這樣了 比較簡單 沒用異步方式

別忘了在頭部添加對jquery的引用哦

關於具體的解釋 我想不太用了吧 大家有什麼不懂的地方或者有什麼好的建議 歡迎一起討論

希望對大家有幫助！

演示下載：http://download.csdn.net/source/1619830