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

客官°小女子只卖身不卖艺 2021-09-30 13:10 529阅读 0赞

在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 属性引用了一个事件句柄函数。当改变选择时调用的事件句柄。

# 2、实现下拉框动态绑定与级联功能 #

**示例：**在页面中添加省份下拉框和城市下拉框，并在省份下拉框的 onchange 事件中调用 bindCity() 方法，获取省份对应的城市列表。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70][]

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70]: /images/20210724/39ac34b48c8f4980b51a2e5b644c4acf.png