版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
在Web项目开发中，经常使用下拉框的级联功能，下面将介绍如何使用JavaScript实现下拉框的动态绑定与级联功能。
1、相关知识点说明
1.1 清空下拉框选项
在每次绑定下拉框选择项数据前，都需要先清除该下拉框原有的选择项数据。
//获取下拉框对象
let selProvince = document.getElementById("selProvince");
//清空下拉框选项
selProvince.options.length = 0;
selProvince.add(new Option("请选择", ""));1.2 动态绑定下拉框选项
下拉框对象的 add() 方法用于向该下拉框中添加一个 <option> 元素。
语法：
selectObject.add(option,before)参数说明：
option：必需。要添加选项元素。必需是 option 或 optgroup 元素。Option 对象代表 HTML 表单中下拉列表中的一个选项。
before：非必需。在选项数组的该元素之前增加新的元素。如果该参数是null，元素添加到选项数组的末尾。
//获取下拉框对象
let selProvince = document.getElementById("selProvince");
//绑定下拉框选项
let json = '[{"key":"广东省","value":"1001"},{"key":"湖南省","value":"1002"}]';
let arr = eval("(" + json + ")"); //转换后的JSON对象
for (let i = 0; i < arr.length; i++) {
let key = arr[i].key;
let value = arr[i].value;
selProvince.add(new Option(key, value));
}1.3 onchange事件
给下拉框添加 onchange 事件，Select 对象的 onchange 属性引用了一个事件句柄函数。当改变选择时调用的事件句柄。
<select id="selProvince" οnchange="bindCity()">
<option>请选择</option>
</select>2、实现下拉框动态绑定与级联功能
示例：在页面中添加省份下拉框和城市下拉框，并在省份下拉框的 onchange 事件中调用 bindCity() 方法，获取省份对应的城市列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript实现下拉框动态绑定与级联功能</title>
<style>
table{
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-collapse: collapse; /*设置单元格的边框合并为1*/
}
th, td{
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
padding: 5px 10px;
}
select{
width: 100px;
padding: 3px;
}
</style>
</head>
<body>
<div align="center">
<form name="myForm">
<table border="1" cellspacing="0">
<caption id="title">用户注册</caption>
<tr>
<th>用户名称：</th>
<td>
<label>您好，欢迎访问 pan_junbiao的博客</label>
</td>
</tr>
<tr>
<th>博客地址：</th>
<td>
<label>https://blog.csdn.net/pan_junbiao</label>
</td>
</tr>
<tr>
<th>省份：</th>
<td>
<select id="selProvince" οnchange="bindCity()">
<option>请选择</option>
</select>
</td>
</tr>
<tr>
<th>城市：</th>
<td>
<select id="selCity">
<option>请选择</option>
</select>
</td>
</tr>
<!-- 以下是提交、取消按钮 -->
<tr>
<td colspan="2" style="text-align: center; padding: 5px;">
<input class="b_button" type="button" value="提交" οnclick="submitFrom()"/>
<input class="b_button" type="button" value="重置" οnclick="resetFrom()"/>
</td>
</tr>
</table>
</form>
</div>
<script>
//页面初始化
window.onload = function () {
//绑定省份下拉框
bindProvince();
};
//绑定省份下拉框
function bindProvince()
{
//获取下拉框对象
let selProvince = document.getElementById("selProvince");
//清空下拉框选项
selProvince.options.length = 0;
selProvince.add(new Option("请选择", ""));
//绑定下拉框选项
let json = '[{"key":"广东省","value":"1001"},{"key":"湖南省","value":"1002"}]';
let arr = eval("(" + json + ")"); //转换后的JSON对象
for (let i = 0; i < arr.length; i++) {
let key = arr[i].key;
let value = arr[i].value;
selProvince.add(new Option(key, value));
}
}
//绑定城市下拉框
function bindCity()
{
//获取下拉框对象
let selProvince = document.getElementById("selProvince");
let selCity = document.getElementById("selCity");
//清空下拉框选项
selCity.options.length = 0;
selCity.add(new Option("请选择", ""));
//获取省份的选项值
let province = selProvince.value;
//根据省份获取城市列表
let json = "";
switch (province) {
case "1001": {
json = '[{"key":"深圳市","value":"1001001"},{"key":"广州市","value":"1001002"}]';
break;
}
case "1002": {
json = '[{"key":"长沙市","value":"1002001"},{"key":"怀化市","value":"1002002"}]';
break;
}
default: {
break;
}
}
if(json){
//绑定下拉框选项
let arr = eval("(" + json + ")"); //转换后的JSON对象
for (let i = 0; i < arr.length; i++) {
let key = arr[i].key;
let value = arr[i].value;
selCity.add(new Option(key, value));
}
}
}
//提交
function submitFrom() {
let province = document.getElementById("selProvince").value;
let city = document.getElementById("selCity").value;
if(!province)
{
alert("请选择省份！");
return;
}
if(!city)
{
alert("请选择城市！");
return;
}
let msg = "您选择的省份编码为["+province+"],城市编码为["+city+"]";
alert(msg);
}
//重置
function resetFrom() {
//重置表单
document.getElementsByName("myForm")[0].reset();
//清空下拉框选项
let selCity = document.getElementById("selCity");
selCity.options.length = 0;
selCity.add(new Option("请选择", ""));
}
</script>
</body>
</html>