其他分享
首页 > 其他分享> > 数组与js实现select下拉菜单的省市区三级联动

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

作者:互联网

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

<!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选项。

 

        

标签:province,city,js,下拉框,onchange,省份,下拉菜单,select
来源: https://blog.csdn.net/Kivze/article/details/120680952