省市联动效果 源码下载

对于省市联动的效果，在大部分的项目我们都会涉及的，开始刚工作的时候真心害怕这个东西。不知道如何下手去写。后来在我们技术老大的带领下用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[xss_clean] = "";            /*添加城市*/            for(var j = 0;j < ctLen;j++){            ctBox.push({                "text" : ct[j],                "value": ct[j]             });        }        addOptions(c,ctBox); }

HTML代码：

    
下拉框联动效果
    
省份：             
    
        市：             
 

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[xss_clean] = "";                        /*添加城市*/                        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);

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