</head>
<body>
<!--1.先准备每个省份对应的城市-->
<select onchange="changeProvince(this)">
<option value="-1">请选择</option>
<option value="0">广东</option>
<option value="1">湖北</option>
<option value="2">山东</option>
</select>
<select id="citysId">
<option>请选择</option>
</select>
</body>
<script>
/*
1.先准备每个省份对应的城市
2.获取省份下拉框选择的数据
3.根据选择的省份去城市数组中获取对应的城市
4.获取城市下拉框对象
5.循环遍历所有的城市
6.在循环中,把每个城市插入到城市下拉框中
7.1 创建option标签
7.2 创建遍历出来的城市文本
7.3 把城市文本添加到option标签中
7.4 把option标签添加到城市下拉框中
*/
//2.获取省份下拉框选择的数据
var citys = new Array(3);
citys[0] = ["深圳", "广州", "东莞", "惠州"];
citys[1] = ["武汉", "黄冈", "黄石", "鄂州", "荆州"];
citys[2] = ["济南", "青岛", "烟台", "淄博", "聊城"];
function changeProvince(obj) {
//4. 获取城市下拉框对象
var citysElenmet = document.getElementById("citysId");
//6 清空城市下拉框中的选项
citysElenmet.innerHTML = "<option>请选择</option>";
// citysElement.innerHTML = "";
//2.1 获取省份下拉框选择的数据
var value = obj.value;
if (value > -1) {
//3.根据选择的省份去城市数组中获取对应的城市
var cityArr = citys[value];
//打印看结果是否有错误
//console.log(cityArr);
//5 循环遍历所有的城市
for (var i = 0; i < cityArr.length; i++) {
//7.1 创建option标签
var op = document.createElement("option");
//7.2 创建遍历出来的城市文本
var text = document.createTextNode(cityArr[i]);
//7.3 把城市文本添加到option标签中
op.appendChild(text);
//打印看结果是否有错误
//console.log(op);
//7.4 把option标签添加到城市下拉框中
citysElenmet.appendChild(op);
}
}
}
</script>
</html>
21_JS控制二级联动
猜你喜欢
转载自blog.csdn.net/weixin_aqing/article/details/112229714
今日推荐
周排行