JQuery實現(xiàn)省市縣三級聯(lián)動
1.頁面結(jié)構(gòu)
<body>
<div id="wrap">
<label for="province">省份：</label>
<select name="" id="province">
<option value="" selected>-選擇省-</option>
</select>
<label for="city">城市：</label>
<select name="" id="city">
<option value="" selected>-選擇市-</option>
</select>
<label for="county">縣區(qū)：</label>
<select name="" id="county">
<option value="" selected>-選擇縣區(qū)-</option>
</select>
</div>
</body>
2.css樣式
<style>
#wrap { width: 500px; height: 200px; background: #eee; margin: 100px auto; padding: 20px; box-sizing: border-box; text-align: center; }
#wrap select { width: 90px; }
</style>
3.JS代碼
省市縣信息.js
<script src="../js/中國省市縣信息.js"></script>
<script>
//定義變量，存儲選中省份索引，城市索引
var p_num, c_num;
//填充省份列表
$(provice).each(function (index, item) {
createOP(item.name, "#province");
});
//監(jiān)聽省份列表的改變
$("#province").change(function () {
var selVal = $(this).find(":selected").text();
$("#city").empty(); //每次省份改變，清空城市列表
//找出所選擇省份的索引
for (var i in provice) {
if (provice[i].name == selVal) {
p_num = i;
break;
}
}
//遍歷填充城市列表
for (var i in provice[p_num].city) {
createOP(provice[p_num].city[i].name, "#city");
}
//第一次選擇省份,城市默認(rèn)選擇第一個，遍歷下面的縣區(qū)(調(diào)用city 的change方法)
$("#city").change();
});
//監(jiān)聽城市列表的改變
$("#city").change(function () {
var selVal = $(this).find(":selected").text();
$("#county").empty(); //每次城市改變，清空縣區(qū)列表
//找出所選擇城市的索引
for (var i in provice[p_num].city) {
if (selVal == provice[p_num].city[i].name) {
c_num = i;
break;
}
}
//遍歷填充縣區(qū)列表
for (var i in provice[p_num].city[c_num].districtAndCounty) {
createOP(provice[p_num].city[c_num].districtAndCounty[i], "#county");
}
});
//創(chuàng)建自動生成 optionn 的函數(shù)
function createOP(val, selector) {
$("<option value=''></option>")
.text(val)
.appendTo(selector);
}
</script>
