下拉框二级联动效果在日常应用场景中经常会碰到，尤其是涉及地区、品种等有多级选项时。例如：常见的省市联动下拉框，在选择省份时，城市列表也会更随改变。
思路：
1，所谓联动效果，是指出发父级的数据变化时，会影响到关联性子级数据元素的变化。
下面是造的省市的数据：
2，根据数据动态生成option节点：
3，根据上述省市数据，其中code代表“省级”指向“城市”的标识符，当省级的数据变更时，出发change事件：
Box = [];
c.innerHTML = "";
/*<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>城市*/
for(var j = 0;j < ctLen;j++){
ct<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.push({
"text" : ct[j],"value": ct[j]
});
}
addOptions(c,ct<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>);
}</pre>下拉框联动效果
省份：
全部JavaScript代码：
Box = [];
/*<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>省份*/
for(var i = 0;i < provinces.length;i++){
pro<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.push({
"text" : provinces[i].name,"value": provinces[i].code
})
}
addOptions(pro,pro<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>);
/*初始化城市*/
addOptions(c,[{
"text" : initCity,"value": initCity
}]);
/*<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>联动事件*/
pro.onchange = function(){
console.log(this);
var ct = city[this.value],ct<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>);
}
}
var provinces = document.getElementById('provinces'),citys = document.getElementById('citys');
provincesCitysLink(provinces,citys);</pre>以上这篇省市联动效果的简单实现代码(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/js/48132.html