JQuery实现省市县三级联动
1.页面结构
<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">县区：</label>
<select name="" id="county">
<option value="" selected>-选择县区-</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");
});
//监听省份列表的改变
$("#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");
}
//第一次选择省份,城市默认选择第一个，遍历下面的县区(调用city 的change方法)
$("#city").change();
});
//监听城市列表的改变
$("#city").change(function () {
var selVal = $(this).find(":selected").text();
$("#county").empty(); //每次城市改变，清空县区列表
//找出所选择城市的索引
for (var i in provice[p_num].city) {
if (selVal == provice[p_num].city[i].name) {
c_num = i;
break;
}
}
//遍历填充县区列表
for (var i in provice[p_num].city[c_num].districtAndCounty) {
createOP(provice[p_num].city[c_num].districtAndCounty[i], "#county");
}
});
//创建自动生成 optionn 的函数
function createOP(val, selector) {
$("<option value=''></option>")
.text(val)
.appendTo(selector);
}
</script>
网友评论