前端之家收集整理的这篇文章主要介绍了
基于JS实现省市联动效果代码分享，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
在日常项目开发阶段经常见到下拉框二级联动效果，尤其是涉及地区、品种等有多级选项时。比如说：常见的省市联动下拉框，在选择省份时，城市列表也会更随改变。
1，所谓联动效果，是指出发父级的数据变化时，会影响到关联性子级数据元素的变化。
下面是造的省市的数据：
2，根据数据动态生成option节点：
3，根据上述省市数据，其中code代表“省级”指向“城市”的标识符，当省级的数据变更时，出发change事件：
Box = [];
c.innerHTML = "";
/*
添加城市*/
for(var j = 0;j < ctLen;j++){
ct
Box.push({
"text" : ct[j],"value": ct[j]
});
}
addOptions(c,ct
Box);
}
Box = [];
/*
添加省份*/
for(var i = 0;i < provinces.length;i++){
pro
Box.push({
"text" : provinces[i].name,"value": provinces[i].code
})
}
addOptions(pro,pro
Box);
/*初始化城市*/
addOptions(c,[{
"text" : initCity,"value": initCity
}]);
/*
添加联动事件*/
pro.onchange = function(){
console.log(this);
var ct = city[this.value],ct
Box);
}
}
var provinces = document.getElementById('provinces'),citys = document.getElementById('citys');
provincesCitysLink(provinces,citys);
