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

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

1、相关知识点说明

1.1 清空下拉框选项

在每次绑定下拉框选择项数据前，都需要先清除该下拉框原有的选择项数据。

//获取下拉框对象
let selProvince = document.getElementById("selProvince");

//清空下拉框选项
selProvince.options.length = 0;
selProvince.add(new Option("请选择", ""));

1.2 动态绑定下拉框选项

下拉框对象的 add() 方法用于向该下拉框中添加一个 元素。

语法：

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() 方法，获取省份对应的城市列表。

    
    
    



    

        

            
用户注册
            

                
用户名称：
                

                    您好，欢迎访问 pan_junbiao的博客
                
            
            

                
博客地址：
                

                    https://blog.csdn.net/pan_junbiao
                
            
            

                
省份：
                

                    
                        请选择
                    
                
            
            

                
城市：
                

                    
                        请选择