利用JQuery實現省市聯動的代碼量比JS少很多,Write less,do more。
實現效果圖:
具體代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市聯動</title>
<script src="../js/jquery-1.11.0.js"></script>
<script>
var provices=[
["南昌市","撫州市","贛州市","吉安市"],
["廣州市","深圳市","汕頭市","惠州市"],
["杭州市","蘇州市","寧波市","溫州市"],
["福州市","龍岩市","廈門市","泉州市"]
];
$(function(){
$("#province").change(function(){
var cities = provices[this.value];
//清空城市信息;
$("#city").empty();
//遍歷城市數據
$(cities).each(function(i,n){
$("#city").append("<option>"+n+"</option>");
});
});
});
</script>
</head>
<body>
<select id="province">
<option value="-1">-請選擇-</option>
<option value="0">江西省</option>
<option value="1">廣東省</option>
<option value="2">浙江省</option>
<option value="3">福建省</option>
</select>
<select id="city">
</select>
</body>
</html>