文章目录
- 按
- 源码
- 2.1. `二级联动.html`
- 2.2. `二级联动.js`
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){
// 获取city的select
var city = document.getElementById("city")
// 获取option
var cityOp = city.getElementsByTagName("option")
// 设置可操作
city.disabled = false
// 先删除,后添加
while (cityOp.length > 0){
// 删除第一个option
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]
// 创建option
let option = document.createElement("option")
// 创建文本
let text = document.createTextNode(value)
// 把文本添加到标签
option.appendChild(text)
//添加到city里面
city.appendChild(option)
}
}
if (!isProvince){
city.disabled = true
let option = document.createElement("option")
let text = document.createTextNode("--请选择市--")
option.appendChild(text)
city.appendChild(option)
}
}
还没有评论,来说两句吧...