蝙蝠岛资源网

基于JS实现省市联动效果代码分享
网络编程 2025/10/27 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

在日常项目开发阶段经常见到下拉框二级联动效果，尤其是涉及地区、品种等有多级选项时。比如说：常见的省市联动下拉框，在选择省份时，城市列表也会更随改变。

基于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 class="content">
<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);

标签：
省市联动,js省市二级联动
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“基于JS实现省市联动效果代码分享”

暂无基于JS实现省市联动效果代码分享的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 MicroAirGrinder 南强小屋 幽灵资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 HerbalExtract 蝙蝠岛资源网 白云城资源网 天枫庄资源网 无争山庄资源网 HerbalExtracts FoodColouring NaturalHerbal HerbalOnline NaturalColouring 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com