<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js控制二级联动</title>
</head>
<body>
<select onchange="changeProvince(this)">
<option value="-1">请选择</option>
<option value="0">广东</option>
<option value="1">湖北</option>
<option value="2">山东</option>
</select>
<select id="a1">
<option>请选择</option>
</select>
</body>
<script>
var citys = new Array(3);
citys[0] = ["深圳", "广州", "东莞", "惠州"];
citys[1] = ["武汉", "黄冈", "黄石", "鄂州", "荆州"];
citys[2] = ["济南", "青岛", "烟台", "淄博", "聊城"];
function changeProvince(obj) {
// 获取城市下拉框对象 eb = 城市下拉框对象
var eb = document.getElementById("a1");
// 清空城市下拉框中的选项
eb.innerHTML = "<option>请选择</option>";
// 获取省份下拉框选择的数据
var value = obj.value;
// 根据选择的省份去城市数组中获取对应的城市
if (value > -1) {
var Arrcitys = citys[value];
// 循环遍历所有的城市
for (var i = 0; i < Arrcitys.length; i++) {
// 创建option标签
var o = document.createElement("option");
// 创建遍历出来的城市文本
var text = document.createTextNode(Arrcitys[i]);
// 把城市文本添加到option标签中
o.appendChild(text);
// 把option标签添加到城市下拉框中
eb.appendChild(o);
}
}
}
</script>
</html>
JavaScript的作用和组成
最新推荐文章于 2022-12-19 16:08:33 发布