下拉框二级联动效果在日常应用场景中经常会碰到，尤其是涉及地区、品种等有多级选项时。例如：常见的省市联动下拉框，在选择省份时，城市列表也会更随改变。
思路：
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> </select> </p> <p> 市： <select> </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);
以上这篇省市联动效果的简单实现代码(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: