jquery省市县三级地址联动


直接上代码吧

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
    </title>
<script type="text/javascript"  src="js/jquery-2.0.3.js"></script>
<script type="text/javascript" src="js/address.js"></script>
<script type="text/javascript">
	$(function() {
		for (var i = 0; i < provinceList.length; i++) {
			var option=$("<option>"+provinceList[i].name+"</option>");
			option.prop("cities",provinceList[i].cityList);
			$("#province").append(option);
		}
		changeProvince();
		changeCity();
		$("#province").on("change", changeProvince); 
		$("#city").on("change",changeCity);
	});
	function changeProvince(){
		$("#city").empty();
		var cities=$("#province").find("option:selected").prop("cities");
		for(var i=0;i<cities.length;i++){
			var option=$("<option>"+cities[i].name+"</option>");
			option.prop("area",cities[i].areaList);
			$("#city").append(option);
		}
		changeCity();
	}
	function changeCity(){
		$("#area").empty();
		var area=$("#city").find("option:selected").prop("area");
		for(var i=0;i<area.length;i++){
			var option=$("<option>"+area[i]+"</option>");
			$("#area").append(option);
		}
	}
</script>
</head>
<body>
<select name="address.province" id="province"></select> 
<select name="address.city" id="city"></select> 
<select name="address.area" id="area"></select>
</body>
</html> 

address.js地址

你可能感兴趣的:(jquery,三级地址联动)