1. 按
- 创建
二级联动.html
与二级联动.js
,接着将本文的源码复制粘贴进去

- 最后打开
二级联动.html
即可看到如下效果:

2. 源码
2.1. 二级联动.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级联动</title>
</head>
<body>
<script src="./二级联动.js"></script>
<select id="province" onchange="choose(this.value)">
<option value="0">--请选择省--</option>
<option value="广东">广东</option>
<option value="湖北">湖北</option>
</select>
<select id="city" disabled="disabled">
<option value="0">--请选择市--</option>
</select>
</body>
</html>
2.2. 二级联动.js
var arr = new Array(2)
arr[0] = ["广东","广州","深圳","佛山"]
arr[1] = ["湖北","荆州","武汉","赤壁"]
function choose(val){
var city = document.getElementById("city")
var cityOp = city.getElementsByTagName("option")
city.disabled = false
while (cityOp.length > 0){
city.removeChild(cityOp[0])
}
var isProvince = false
for (var i = 0; i < arr.length; i++) {
var arr1 = arr[i]
var firstVal = arr1[0]
if (firstVal != val) continue
isProvince = true
for (var j = 1; j < arr1.length; j++) {
let value = arr1[j]
let option = document.createElement("option")
let text = document.createTextNode(value)
option.appendChild(text)
city.appendChild(option)
}
}
if (!isProvince){
city.disabled = true
let option = document.createElement("option")
let text = document.createTextNode("--请选择市--")
option.appendChild(text)
city.appendChild(option)
}
}