下拉框二级联动效果在日常应用场景中经常会碰到，尤其是涉及地区、品种等有多级选项时。例如：常见的省市联动下拉框，在选择省份时，城市列表也会更随改变。
思路：
1，所谓联动效果，是指出发父级的数据变化时，会影响到关联性子级数据元素的变化。
下面是造的省市的数据：
rush: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:[
"其他"
]
}
};
2，根据数据动态生成option节点：
rush:js;">
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事件：
rush:js;">
pro.onchange = function(){
console.log(this);
var ct = city[this.value],ctLen = ct.length,ctBox = [];
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>rush:js;">
下拉框联动效果
省份：
全部JavaScript代码：
rush:js;">
var linkDatas = {
provinces:[
{
"code":"0",6:[
"其他"
]
}
};
function addOptions(target,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 = [];
/*<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.jb51.cc/js/48132.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
