思路:
省市联动,我们肯定要先拿到省份的select对象,然后将我们的省份值赋给下拉框,通过option.然后给省份下拉框绑定一个点击事件,得到城市select对象,通过省份的数组索引得到对应的城市数组对象,通过遍历将对应城市赋给城市select对象.
如有问题,欢迎来扰,可能我描述的不甚清楚,期待补充,祝大家身体健康,事业顺利
先贴代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市联动</title>
</head>
<body>
籍贯:
<select id="pro">
<option value="">-请选择-</option>
</select>
<select id="city">
<option>-请选择-</option>
</select>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script type="text/javascript">
// 定义省份的数据
var proList = ["北京","山西","山东","河北","河南"];
// 定义城市的数据
var cityList = [
["东城区","西城区","朝阳区","丰台区","海淀区","昌平区"],
["太原市","大同市","运城市","临汾市","忻州市","晋中市"],
["济南市","青岛市","威海市","烟台市","临沂市","德州市"],
["石家庄市","邢台市","保定市"],
["郑州市","焦作市","三门峡市"],
];
// 给省份下拉框赋值
for (var i = 0; i < proList.length; i++) {
// 定义opt对象
var opt = "<option>" + proList[i] + "</option>";
// 将opt下拉选项追加到select标签中最后
$("#pro").append(opt);
}
/*给省份下拉框绑定改变事件*/
$("#pro").change(function(){
// 得到当前选中项的索引
var index = this.selectedIndex;
console.log(index);
// 获取省份对应的城市列表
var cityArr = cityList[index-1];
// 将城市下拉框中的下拉选项删除(除了第一个)
$("#city option:gt(0)").remove();
// 判断数组是否为空
if (cityArr != null && cityArr.length > 0) {
// 将城市数组填充到城市下拉框中
for (var i = 0; i < cityArr.length; i++) {
// 定义opt对象
var opt = "<option>" + cityArr[i] + "</option>";
// 将opt下拉选项追加到select标签中最后
$("#city").append(opt);
}
}
});
</script>
</html>
然后上图: