数组与js实现select下拉菜单的省市区三级联动

2023-11-02 22:05:52

先附上源码，后面再分析。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单的三级联动</title>
</head>
<body>
    <select id="province">
        <option value="-1">请选择</option>
    </select>
    <select id="city"></select>
    <select id="country"></select>
    
    <script>
        //省份数组
        var provinceArr = ['上海','江苏','河北'];
        //城市数组
        var cityArr = [
            ['上海市'],
            ['苏州市','南京市','扬州市'],
            ['石家庄','秦皇岛','张家口']
        ];
        //区域数组
        var countryArr = [
            [
                ['黄浦区','静安区','长宁区','浦东区']
            ],[
                ['虎丘区','吴中区','相城区','姑苏区','吴江区'],
                ['玄武区','秦淮区','建邺区','鼓楼区','浦口区'],
                ['邗江区','广陵区','江都区']
            ],[
                ['长安区','桥西区','新华区','井陉矿区'],
                ['海港区','山海关区','北戴河区','抚宁区'],
                ['桥东区','桥西区','宣化区','下花园区']
            ]
        ]

        //自动创建省份下拉菜单
        function createOption(obj,data){        //obj表示下拉菜单的元素对象，data表示数组保存的下拉菜单选项
            for(var i in data){                 //也可以写成for(let i =0;i<data.length;i++)
                var op = new Option(data[i],i); //创建下拉菜单中的option
                                                //Option的第一个参数用于设置显示的文本，第二个参数用于设置value值
                obj.options.add(op);            //将选项添加到下拉菜单中
            }
        }
        var province = document.getElementById('province'); //获取省份元素对象
        createOption(province,provinceArr);

        //选择省份后，自动生成对应城市的下拉菜单
        var city = document.getElementById('city');  //获取城市下拉菜单的元素对象
        province.onchange = function(){              //为省份下拉菜单添加事件
            city.options.length = 0;                 //清空city下的所有原有option
            createOption(city,cityArr[province.value]);
            if(province.value >=0){
                city.onchange();
            }else{
                country.options.length = 0;
            }
        }

        //选择城市后，自动生成对应区域的下拉菜单
        var country = document.getElementById('country');  //获取区域下拉菜单的元素对象
        city.onchange = function(){
            country.options.length = 0;
            createOption(country,countryArr[province.value][city.value]);
        };


    </script>

</body>
</html>

实现效果如下：

下面开始分析

1.首先是我们自己定义createOption()函数，该函数的作用是创建并设置下拉菜单的option选项。

<script>
    function createOption(obj,data){        //obj表示下拉菜单的元素对象，data表示数组保存的下拉菜单选项数据
        for(var i in data){                 //也可以写成for(let i =0;i<data.length;i++)
            var op = new Option(data[i],i); //创建下拉菜单中的option
                                            //Option的第一个参数用于设置显示的文本，第二个参数用于设置value值
            obj.options.add(op);            //将选项添加到下拉菜单中
        }
    }
</script>

例如我们向第一个id为"province"的select元素中分别编写省份数组中上海,江苏,河北三个option选项。

在通过getElementById的方法获取到下拉菜单的元素对象后，我们在调用createOption函数时分别传入该元素对象和他对应的省份数组provinceArr。

var province = document.getElementById('province'); //获取省份元素对象

createOption(province,provinceArr);

函数调用后的select变为：

    <select id="province">
        <option value="-1">请选择</option> //该选项是自己编写的
        <option value="0">上海</option>    //下面三项是调用函数后自动编写的
        <option value="1">江苏</option>
        <option value="2">河北</option>
    </select>

2.接下来我们来看onchange事件，该事件是实现下拉菜单联动的关键，该事件的作用是当元素改变时运行脚本，即当我们选择完下拉框的选项后便执行onchange中的function方法。

下面的代码中，我们可以看到，在我们选择完省份选项后，我们便再次调用了createOption函数来自动编写选项，不过这一次我们传入的参数是城市select元素对象和其对应的城市数组。

例如，我们在省份下拉框选择江苏后，province.value就会变为1，而我们传入的数组就为cityArr[1]，其对应的数据为['苏州市','南京市','扬州市']，这样我们便成功向城市下拉框中编写了江苏对应的三个城市的选项，完成了省份和城市下拉框的联动。

我们可以注意到该function中还有清空原有option和if..else..判断的操作，这两者的作用我将在后面的注意事项讲解。

    <script>
        var city = document.getElementById('city');  //获取城市下拉菜单的元素对象
        province.onchange = function(){              //为省份下拉菜单添加事件
            city.options.length = 0;                 //清空city下的所有原有option
            createOption(city,cityArr[province.value]);
            if(province.value >=0){
                city.onchange();
            }else{
                country.options.length = 0;
            }
        }
    </script>

3.在明白了省份和城市的下拉框联动原理后，城市和区域的联动其实也是相同的原理。

例如，我们在省份下拉框中选择完江苏后，province.value为1，而在城市下拉框中我们选择扬州市的话，city.value就为2，则我们传入的数组为countryArr[1][2]，在区域数组中对应的数据为['邗江区','广陵区','江都区']，这样我们便在区域select元素对象中编写了三个对应的区域option选项。

    <script>
        //选择城市后，自动生成对应区域的下拉菜单
        var country = document.getElementById('country');  //获取区域下拉菜单的元素对象
        city.onchange = function(){
            country.options.length = 0;
            createOption(country,countryArr[province.value][city.value]);
        };
    </script>

注意事项

1.清空option操作的必要性

我们可以发现，在每次的onchange事件中，在调用createOption函数前都执行了将原有下拉菜单option选项清空的操作，这主要是为了让我们在再次选择省份或城市下拉框时，先清空之前城市下拉框或区域下拉框中遗留的option选项。

为了显示清空操作的必要性，我先将省份onchange中的清空操作注释掉。

    <script>
        var city = document.getElementById('city');  //获取城市下拉菜单的元素对象
        province.onchange = function(){              //为省份下拉菜单添加事件
            //city.options.length = 0;                 //清空city下的所有原有option
            createOption(city,cityArr[province.value]);
            if(province.value >=0){
                city.onchange();
            }else{
                country.options.length = 0;
            }
        }
    </script>

在注释掉清空操作后，我们在省份先选择江苏然后在选择河北，城市下拉框就会出现两个省份的城市数据叠加积累的现象，所以我们可以看出清空操作的作用就是在我们选择河北时，清空掉之前选择江苏省留下的苏州市、南京市和扬州市这三个数据。

2.onchange中if..else..判断的作用。

如果我们将if..else..注释掉，我们就会发现当我们在第一次选择完省市区后再次选择省份的话，区域的下拉菜单却还是前一个省份城市的。

例如，我们在第一次选择江苏扬州市广陵区后，选择修改省份为河北，就会出现区域下拉框仍为广陵区的现象。

第一次选择江苏扬州市广陵区：

接着修改省份为河北：

为了解决这种情况，就需要在省份的onchange事件中添加一个if..else..判断，

    <script>
        var city = document.getElementById('city');  //获取城市下拉菜单的元素对象
        province.onchange = function(){              //为省份下拉菜单添加事件
            city.options.length = 0;                 //清空city下的所有原有option
            createOption(city,cityArr[province.value]);
            if(province.value >=0){
                city.onchange();
            }else{
                country.options.length = 0;
            }
        }
    </script>

在该判断中，当province.value小于0，即我们在省份框内选择了“请选择”这个选项时，他将会清空区域下拉框中的所有选项，变为下图这个样子。

而当我们如上面的例子中先选择了江苏然后再选择河北的话，在选择完河北后将触发省份的onchange事件，此时我们的province.valuey已经变为2，大于0将执行城市的onchange事件，即为区域下拉框添加河北对应的区域option选项。

码农公寓

先附上源码，后面再分析。

实现效果如下：

下面开始分析

注意事项

相关文章