JS实现简单省市二级联动

2023-08-05 08:13:05 171

刚始学习java刚好看到用js实现省市二级联动的效果，就想着写篇博客，顺便检验下自己的学习成果。

好了废话少说先看看实际效果：

技术分析：

要实现这个功能呢，首先要用到html+js

这里用建一个下拉列表，绑定onchange事件



湖北
湖南
河北
河南

好了下面是script部分了

这样这个简单的省市二级联动就完成了，是不是特别简单呢？本人因为偷懒所以只写了四个省市，如果想完善点可以自己添加省市哦。

小编再为大家分享一位网友分享的一段代码：原生js实现省市二级联动，再此谢谢作者的分享。

通过document.createElement()创建option选项，再遍历数组appendChild到select对象内，三级联动就是用三位数组和嵌套遍历来实现。





js省市二级联动



省份：
城市：





varprovinces=["请选择省份","北京市","天津市","上海市","重庆市","江苏省","浙江省","江西省","海南省"];
varcitys=[
["请选择城市"],
["北京市"],
["天津市"],
["上海市"],
["重庆市"],
["南京市","无锡市","徐州市","常州市","苏州市","南通市","连云港市","淮安市","盐城市","扬州市","镇江市","泰州市","宿迁市"],
["杭州市","宁波市","温州市","绍兴市","湖州市","嘉兴市","金华市","衢州市","台州市","丽水市","舟山"],
["南昌市","九江市","上饶市","抚州市","宜春市","吉安市","赣州市","景德镇","萍乡市","新余市","鹰潭市"],
["海口市","三亚市","三沙市","儋州市"]
];
window.onload=function(){
varprovince=document.getElementById("province");
varcity=document.getElementById("city");
varindex=0;
//创建好后加入到列表中
for(variinprovinces)
{
varoption=document.createElement("option");
option.text=provinces[i];
option.value=provinces[i];
province.appendChild(option);
}
varoption=document.createElement("option");
option.text=citys[index];
option.value=citys[index];
city.appendChild(option);
}

functionchangeProvince(selectedIndex){
varcity=document.getElementById("city");
city.options.length=0;
for(variincitys[selectedIndex])
{
varoption=document.createElement("option");
option.text=citys[selectedIndex][i];
option.value=citys[selectedIndex][i];
city.appendChild(option);
}

}

更多关于菜单文章的精彩内容请点击专题：Javascript级联菜单特效汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

JS实现简单省市二级联动

热门推荐

随机推荐