基於JS實現省市聯動效果代碼分享

在日常項目開發階段經常見到下拉框二級聯動效果，尤其是涉及地區、品種等有多級選項時。比如說：常見的省市聯動下拉框，在選擇省份時，城市列表也會更隨改變。

思路：

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