jquery解析XML實現省市區級聯

使用jquery解析xml實現省市區級聯

1. 首先要先準備好全國省市區級聯的XML文件。areas.xml文件
   這裏只給一部分作爲測試完整版下載

<?xml version="1.0" encoding="UTF-8"?>
<china>
	<province name="北京市" code="110000">
		<city name="北京市" code="110100">
			<area name="東城區" code="110101"/>
			<area name="西城區" code="110102"/>
			<area name="崇文區" code="110103"/>
			<area name="宣武區" code="110104"/>
			<area name="朝陽區" code="110105"/>
			<area name="豐臺區" code="110106"/>
			<area name="石景山區" code="110107"/>
			<area name="海淀區" code="110108"/>
			<area name="門頭溝區" code="110109"/>
			<area name="房山區" code="110111"/>
			<area name="通州區" code="110112"/>
			<area name="順義區" code="110113"/>
			<area name="昌平區" code="110114"/>
			<area name="大興區" code="110115"/>
			<area name="懷柔區" code="110116"/>
			<area name="平谷區" code="110117"/>
		</city>
		<city name="縣" code="110200">
			<area name="密雲縣" code="110228"/>
			<area name="延慶縣" code="110229"/>
		</city>
	</province>
</china>

2. jquery解析xml的代碼:

var docXml;	//獲取到的xml文件信息
var code=0;	//省的編碼
var cityCode=0;	//城市的編碼
$(function(){
	//發get請求得到areas.xml 這裏的地址是你放areas.xml的地址
	$.get("../../xml/areas.xml",function(xml){
		docXml=xml;
		
		//獲取所有的省份節點
		var provinceNodes=$(docXml).find("province");
		
		var provinceStr='<option value="0">--請選擇省份--</option>';
		
		//開始循環所有節點 取出省份的值
		$.each(provinceNodes,function(index,item){
			
			//獲取當前這個省份的name屬性的值，即省份的名稱
			province=$(item).attr("name");
			
			//獲取這個省份的編碼值，只取前三位，因爲這個省有哪些市，這些市的編碼前三位和省的前三位相同
			code=$(item).attr("code").substring(0,3);	
			provinceStr+='<option value="'+ code +'">'+ province +'</option>';
			
		})
		$("#province").html(provinceStr);
	})
})

//當省份一旦發生改變的時候，就去修改市的
$("#province").on("change",function(){
	
	//首先取出你選擇的省份是哪一個   獲取到的是省份編號的前三位110,130
	var provinceCode=$("#province option:selected").val();
	
	//獲取所有的城市節點
	var cityNodes=$(docXml).find("city");
	
	var cityStr='<option value="0">--請選擇城市--</option>';
	
	//循環所有的城市節點   ，根據code去找對應城市
	$(cityNodes).each(function(index,item){
		cityCode=$(item).attr("code");
		//取出code存到value裏面
		code=$(item).attr("code").substring(0,4);
		
		//首先取出當前這個節點的code看是否是以provinceCode開頭
		if(cityCode.startsWith(provinceCode)){
			cityStr+="<option value='"+ code +"'>"+ $(item).attr("name") +"</option>";
		}
	})
	$("#city").html(cityStr);
	
})

//當城市一旦發生改變的時候，就去修改區的
$("#city").on("change",function(){
	//首先取出你選擇的城市是哪一個   獲取到的是城市編號的前4位1101,1102
	cityCode=$("#city option:selected").val();
	
	//獲取所有的區節點
	var areaNodes=$(docXml).find("area");
	
	var areaCode=0;
	var areaStr='<option value="0">--請選擇城市--</option>';
	
	//循環所有的area節點   ，根據code去找對應區
	$(areaNodes).each(function(index,item){
		//首先取出當前這個節點的code看是否是以cityCode開頭
		areaCode=$(item).attr("code");
		//取出code存到value裏面
		//code=$(item).attr("code").substring(0,4);
		if(areaCode.startsWith(cityCode)){
			areaStr+="<option value='0'>"+ $(item).attr("name") +"</option>";
		}
	})
	$("#area").html(areaStr);
	
})

3. html代碼

	<form id="myform">
			<ul>
				<li>
					<label for="addr_name">收貨地址：</label>
					<select id="province">
						
					</select>
					<select id="city">
						<option value="0">--請選擇城市--</option>
					</select>
					<select id="area">
						<option value="0">--請選擇地區--</option>
					</select>
				</li>
			</ul>
		</form>