省市联动效果 源码下载

对于省市联动的效果，在大部分的项目我们都会涉及的，开始刚工作的时候真心害怕这个东西。不知道如何下手去写。后来在我们技术老大的带领下用angular写的省市联动效果，真心不错。但是有些项目我们不需要加载angular。今天我们就单独拿出来用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:[
         "其他"
      ]
    }
 };

第二步，根据数据动态生成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);

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