如何实现淘宝地址中的三级联动

不管是在淘宝还是京东上,当我们在管理收货地址时,都会看到一个选择省市区的3个选项框,用以添加收货地址,如下图:

当我们选择省份时,在第二个下拉框将会出现这个省对应的市,同样,选择市时,在第三个下拉框也会出现这个市对应的县城

编辑代码前的准备:
可以先到网上去下载一个别人已经写好的js代码,这个js代码中记录了各个省市区的代号以及信息,这里我就引用超哥找到的一个比较简洁的js代码地址:http://files.cnblogs.com/files/youngerliu/city_code.js

我们下载到的实际是3个数组,我们可以给它添加到一个名为data的对象中,如图:

可以理解为 data 这个对象中有三个属性,分别是provinceList,cityList,countyList;
而我们发现这三个属性实际都是数组(数组用[ ]括起来,对象用{ }括起来),三个属性中,又有一个个的对象.

HTML代码:

    <select></select>
    <select></select>
    <select></select>

CSS代码:

    <style>
        select{
            width: 250px;
            height: 50px;
            font-size: 20px;
            line-height: 50px;
        }
    </style>

这里我就简单的写了一些样式,要是想制作更加漂亮的效果,可自行添加.

JS代码:

<script src="data.js"></script>         //首先要把我们下载下来的js代码引用进来,也就是各个省市的信息

这里我就用分别用”面向过程”和”面向对象”的俩种方式来制作

一: 面向过程

原理解析:
通过创建option的函数将data这个对象中的”provinceList”属性的各个省的信息添加到第一个select中,这里有一点要注意,将省名(ProName)以及省的类型(ProRemark)添加到option中是通过option.innerHTML的这种方式,而每个省的ID(ProID)我们也得取到并且赋值给option.value.这是因为在data对象中的”cityList”属性中也有每个省的ID(ProID),如果我们获取到了第一个select中用户选择的省的ID后,然后用获取到的ID与”cityList”中的ID进行比较,要是找到相同的了也就找到了我们第二个select中药填充的内容(也就是市),第三个select选项框原理一样.

代码分析:
1.可以看到在页面中有三个选项框,那么第一步我们要做的应该是将三个选项框内填充上省市等信息,而省市的信息那么多,手动的添加进去肯定是不科学的,所以可以通过定义一个函数用于在每个select的选项框中创建并添加option.

<script>
        var selects = document.querySelectorAll('select');  //获取全部的选项框
//        console.log(data['provinceList'])
        /**
         * 定义一个函数用来创建第一个选项框内的内容
         * @param parent    第一个选项框
         */
        function createOption(parent){
            for(var pro of data['provinceList']){   //遍历对象date下的省份数组,date.provinceList
                var ProName = pro["ProName"];       //获取每个pro下的ProName属性
                var ProRemark = pro["ProRemark"];   //获取每个pro下的ProRemark属性
                var ProID = pro["ProID"];           //获取每个pro下的ProID属性
                var option = document.createElement('option');
                option.innerHTML = pro["ProName"]+'\t'+pro["ProRemark"];
                option.value = ProID;
                parent.appendChild(option);
            }
        }
        createOption(selects[0]);

代码分析:
2.当用户选择了第一个选项框中的省后,通过.onchange事件来触发选项框2的内容显示,并获取到选项框1的value值让它与”cityList”中的ProID比较,找到对应的市的信息.选项框3同选项框2.

        selects[0].onchange=function(){
            selects[1].innerHTML = '';
            selects[2].innerHTML= '';
            var val = selects[0].value;
            for(var city of data['cityList']){
                var ProID = city['ProID'];
                if(ProID == val){
                    var option = document.createElement('option');
                    var CityName = city['CityName'];
                    var CityID = city['CityID'];
                    option.innerHTML = CityName;
                    option.value = CityID;
                    selects[1].appendChild(option);
                }
            }
        }
        selects[1].onchange=function(){
            selects[2].innerHTML= '';
            var val = selects[1].value;
            for(var county of data['countyList']){
                var CityID = county["CityID"];
                if(CityID ==val){
                    var option = document.createElement('option');
                    var Id = county["Id"];
                    var DisName = county["DisName"];
                    option.innerHTML = DisName;
                    option.value = Id;
                    selects[2].appendChild(option)
                }
            }
        }
    </script>

二:面向对象

面向过程的方式,对于步骤上的逻辑比较看重,就是先要做什么,然后做什么,最后做什么.
而面向对象采用的就是面向对象的思维:就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。

HTML代码和CSS代码不变,而JS代码如下图:

1.创建一个名为threeLevelChange的对象.
2.这个对象中应该有
一个初始化函数init();
三个分别填充三个选项框的函数 ;
一个创建产生option的函数createOption();
3.所有的步骤完成后,我们只需要调用一下threeLevelChange对象中的init()就可以了.

具体代码:

<script>
        var threeLevelChange = {
            //所有初始化相关的动作,默认显示北京的信息,给省市的elect注册事件
            init:function (){
                this.allSelect = document.querySelectorAll('select');
                this.fillProvinces();
                this.fillCities(1);
                this.fillCounties(1);

                var self = this;       //为了在.onchange中能够调用对象中的函数,可以把this(也就是threeLevelChange)用变量self盛放起来;
                this.allSelect[0].onchange=function(){    //当第一个选项框发生改变时
                    var proID = this.value;          //这里的this指代的是第一个选项框
                    self.fillCities(proID);          //再次调用对象中的fillCities函数
                };
                this.allSelect[1].onchange=function(){
                    var cityID = this.value;
                    self.fillCounties(cityID);
                }
            },
            //定义填充第一个选项框的函数
            fillProvinces : function(){
                var provinceList = data.provinceList;
                for(var province of provinceList){
                    var proName = province.ProName;
                    var proID = province.ProID;
                    var opt = this.createOption(proName,proID);
                    this.allSelect[0].appendChild(opt);
                }
            },
            //定义填充第一个选项框的函数
            fillCities : function(proID){
                this.allSelect[1].innerHTML='';
                var cityList = data.cityList;
                for(var city of cityList){
                    if(proID==city.ProID){
                        var cityName = city.CityName;
                        var cityID = city.CityID;
                        var opt = this.createOption(cityName,cityID);
                        this.allSelect[1].appendChild(opt);
                    }

                }
            },
            //定义填充第一个选项框的函数
            fillCounties : function(cityID){
                this.allSelect[2].innerHTML='';
                var countyList = data.countyList;
                for(var county of countyList){
                    if(cityID == county.CityID){
                        var countyName = county.DisName;
                        var countID = county.Id;
                        var opt = this.createOption(countyName,countID);
                        this.allSelect[2].appendChild(opt);
                    }
                }
            },
            //定义一个函数用于创建产生option
            createOption : function (text,value){
                var option = document.createElement('option');
                option.innerHTML = text;
                option.value = value;
                return option;
             }
        };
        //所有的步骤都在threeLevelChange这个对象中完成,我们只需要调用它里面的init()函数就OK了.
        threeLevelChange.init();

    </script>

纯博主手打,版权所有,请勿转载!