基于JS实现省市联动效果代码分享

2019-11-20 09:47:24

字体：大中小

来源：转载

供稿：网友

在日常项目开发阶段经常见到下拉框二级联动效果，尤其是涉及地区、品种等有多级选项时。比如说：常见的省市联动下拉框，在选择省份时，城市列表也会更随改变。

思路：

1，所谓联动效果，是指出发父级的数据变化时，会影响到关联性子级数据元素的变化。

下面是造的省市的数据：

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:["其他"]}};

2，根据数据动态生成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);}}

3，根据上述省市数据，其中code代表“省级”指向“城市”的标识符，当省级的数据变更时，出发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>

全部JavaScript代码：

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);

上一篇：深入理解JavaScript单体内置对象

下一篇：对象转换为原始值的实现方法