JavaScript实现下拉框动态绑定与级联功能

本文链接：https://blog.csdn.net/pan_junbiao/article/details/98340344

本文介绍如何使用JavaScript在Web项目中实现下拉框的动态绑定与级联功能，包括清空下拉框选项、动态绑定选项及利用onchange事件触发级联更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于 Window对象和 Document 对象的详细使用，系列文章：

《Window对象的常用属性和方法》

《Document对象的常用属性和方法：getElementById()、getElementsByName()、createElement()方法》

《Document获取元素并修改内容：getElementById()方法、value属性、innerHTML属性、innerText属性》

《Document自定义属性：getAttribute()、setAttribute()、removeAttribute()函数》

《Document动态添加与删除HTML节点：createElement()、appendChild()、removeChild()函数》

《JavaScript操作表单元素：文本框、单选按钮、下拉列表、复选框》

《JavaScript实现下拉框动态绑定与级联功能》

《JavaScript页面加载完成后执行方法：window.onload、$(document).ready()、Vue.created()》

《JavaScript弹出框的使用：对话框、确认框、提示框、弹窗操作》

在Web项目开发中，经常使用下拉框的级联功能，下面将介绍如何使用JavaScript实现下拉框的动态绑定与级联功能。

1、相关知识点说明

1.1 获取下拉框的值和文本

//获取下拉框选择的值
let value = document.getElementById("selProvince").value;
 
//获取下拉框选择的文本
let myselect = document.getElementById("selProvince");
let index = myselect.selectedIndex;
let text= myselect.options[index].text;

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" onchange="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" onchange="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="提交" onclick="submitFrom()"/>
                    <input class="b_button" type="button" value="重置" onclick="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>