代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两级联动</title>
<script>
//准备数据
var provinces = [
["深圳市", "东莞市", "惠州市", "广州市"],
["长沙市", "岳阳市", "株洲市", "湘潭市"],
["厦门市", "福州市", "漳州市", "泉州市"]
];
/*
1. 确定事件: onchange
2. 函数: selectProvince()
3:
得到当前操作元素
得到当前选中的是那一个省份
从数组中取出对应的城市信息
动态创建城市元素节点
添加到城市select中
*/
function selectProvince() {
var province = document.getElementById("province");
//得到当前选中的是哪个省份
var value = province.value;
//从数组中取出对应的城市信息
var cities = provinces[value];
var citySelect = document.getElementById("city");
//清空select中的option
citySelect.options.length = 0;
for (var i = 0; i < cities.length; i++) {
var cityText = cities[i];
//动态创建城市元素节点 <option>东莞市</option>
//创建option节点
var option1 = document.createElement("option"); //<option></option>
//创建城市文本节点
var textNode = document.createTextNode(cityText);//东莞市
//将option节点和文本内容关联起来
option1.appendChild(textNode); //<option>东莞市</option>
//添加到城市select中
citySelect.appendChild(option1);
}
}
</script>
</head>
<body>
<form action="">
<!--选择省份-->
<label for="province"></label>
<select onchange="selectProvince()" id="province">
<option value="-1">--请选择--</option>
<option value="0">广东省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<!--选择城市-->
<label for="city"></label>
<select id="city"></select>
</form>
</body>
</html>
原文地址：https://www.cnblogs.com/believepd/p/10012642.html
时间： 2024-10-04 14:58:01