省市联动效果源码下载

我会带着你远行 2022-10-01 14:45 145阅读 0赞

对于省市联动的效果，在大部分的项目我们都会涉及的，开始刚工作的时候真心害怕这个东西。不知道如何下手去写。后来在我们技术老大的带领下用angular写的省市联动效果，真心不错。但是有些项目我们不需要加载angular。今天我们就单独拿出来用JS 看看如何实现省市联动的效果吧。

[![shengshi][]][shengshi]

## 第一步： 分析一下思路 ##

常见的省市联动下拉框，在选择省份时，城市列表也会更随改变。所谓联动效果，是指出发父级的数据变化时，会影响到关联性子级数据元素的变化。

我们用简单的案例来一起看看：

## 第二步，根据数据动态生成option节点： ##

function addOptions(target,options){
         var optionEle = null,
         target = target,
         option = options,
         optionLen = options.length;
         for(var i = 0;i < optionLen;i++){
            optionEle = document.createElement('option');
            optionEle.value = option[i].value;
            optionEle.text = option[i].text;
            target.options.add(optionEle);
         }
     }

## 第三步，当省级的数据变更时，出发change事件： ##

pro.onchange = function(){
        console.log(this);
        var ct = city[this.value],
            ctLen = ct.length,
            ctBox = [];
            c.innerHTML = "";    
            /*添加城市*/    
            for(var j = 0;j < ctLen;j++){
                ctBox.push({
                    "text" : ct[j],
                    "value": ct[j]
                 });
            }
            addOptions(c,ctBox);
     }

### HTML代码： ###

<div class="content">
        <h3>下拉框联动效果</h3>
        <p>省份：
            <select name="provinces" id="provinces"> </select>
        </p>
        <p>
            市：
            <select name="citys" id="citys"> </select>
        </p>
     </div>

### JS 部分 ###

var linkDatas = {
                provinces:[
                    {
                        "code":"0",
                        "name":"请选择"
                    },
                    {
                        "code":"1",
                        "name":"北京"
                    },
                    {
                        "code":"2",
                        "name":"天津"
                    },
                    {
                        "code":"3",
                        "name":"河北"
                    },
                    {
                        "code":"4",
                        "name":"湖北"
                    },
                    {
                        "code":"5",
                        "name":"广东"
                    },
                    {
                        "code":"6",
                        "name":"其他"
                    }
                ],
                citys:{
                    0:[
                        "请选择"
                    ],
                    1:[
                        "朝阳区",
                        "海淀区",
                        "东城区",
                        "西城区",
                        "房山区",
                        "其他"
                    ],
                    2:[
                        "天津"
                    ],
                    3:[
                        "沧州",
                        "石家庄",
                        "秦皇岛",
                        "其他"
                    ],
                    4:[
                        "武汉市",
                        "宜昌市",
                        "襄樊市",
                        "其他"
                    ],
                    5:[
                        "广州市",
                        "深圳市",
                        "汕头市",
                        "佛山市",
                        "珠海市",
                        "其他"
                    ],
                    6:[
                        "其他"
                    ]
                }
                };
                function addOptions(target,options){
                    var optionEle = null,
                            target = target,
                            option = options,
                            optionLen = options.length;
                    for(var i = 0;i < optionLen;i++){
                        optionEle = document.createElement('option');
                        optionEle.value = option[i].value;
                        optionEle.text = option[i].text;
                        target.options.add(optionEle);
                    }
                }
                function provincesCitysLink(pro,c){
                    var LD                 = linkDatas,
                            provinces = LD.provinces,
                            city             = LD.citys,
                            initCity    = city[0],
                            proBox        = [];
    
                    /*添加省份*/
                    for(var i = 0;i < provinces.length;i++){
                        proBox.push({
                            "text" : provinces[i].name,
                            "value": provinces[i].code
                        })
                    }        
                    addOptions(pro,proBox);
    
                    /*初始化城市*/
                    addOptions(c,[{
                        "text" : initCity,
                        "value": initCity
                    }]);
    
                    /*添加联动事件*/
                    pro.onchange = function(){
                        console.log(this);
                        var ct = city[this.value],
                                ctLen = ct.length,
                                ctBox = [];
    
                        c.innerHTML = "";    
                        /*添加城市*/    
                        for(var j = 0;j < ctLen;j++){
                            ctBox.push({
                                "text" : ct[j],
                                "value": ct[j]
                            });
                        }
                        addOptions(c,ctBox);
                    }
                }
                var provinces = document.getElementById('provinces'),
                        citys         = document.getElementById('citys');
                provincesCitysLink(provinces,citys);

今天就分享到这里，昨晚没我们家俩个宝贝折腾的困的不行了。祝大家学习愉快了！ 喜欢就动手分享去大家把！

转载于:https://blog.51cto.com/aliyue/1786528

[shengshi]: /images/20220118/bf1881d478324258824fd44211595bcc.png