省市联动效果 源码下载

对于省市联动的效果，在大部分的项目我们都会涉及的，开始刚工作的时候真心害怕这个东西。不知道如何下手去写。后来在我们技术老大的带领下用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">     <h4>下拉框联动效果</h4>     <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);

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