JS实现简单省市二级联动


Posted in Javascript onNovember 27, 2019

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

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

JS实现简单省市二级联动

技术分析:

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

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

<select onchange="changeCity(this.value)">
 <option>--请选择--</option>
 <option value="0">湖北</option>
 <option value="1">湖南</option>
 <option value="2">河北</option>
 <option value="3">河南</option>
 </select>
 <select id="city">
 
</select>

好了下面是script部分了

<script>
 //1.创建一个二维数组用于存储省份和城市
 var cities = new Array(3);
 cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
 cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
 cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
 cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
 
 function changeCity(val){
 
 //7.获取第二个下拉列表
 var c=document.getElementById("city");
 
 //9.清空第二个下拉列表的option内容
 c.options.length=0;
 
 //2.遍历二维数组中的省份
 for(var i=0;i<cities.length;i++){
 //注意,比较的是角标
 if(val==i){
 //3.遍历用户选择的省份下的城市
 for(var j=0;j<cities[i].length;j++){
 //alert(cities[i][j]);
 //4.创建城市的文本节点
 var a = document.createTextNode(cities[i][j]);
 //5.创建option元素节点
 var b = document.createElement("option");
 //6.将城市的文本节点添加到option元素节点
 b.appendChild(a);
 //8.将option元素节点添加到第二个下拉列表中去
 c.appendChild(b);
 }
 }
 }
 }
</script>

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

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

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

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>js省市二级联动</title>
 </head>
 <body>
 <form name="aform" method="get" action="#">
 省份:<select id="province" name="province" onchange="changeProvince(this.selectedIndex)"></select>
 城市:<select id="city" name="city"></select>
 </form>
 </body>
</html>

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中将字符串转换成json的三种方式
Jan 12 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
Angular value与ngValue区别详解
Nov 27 #Javascript
原生js实现二级联动菜单
Nov 27 #Javascript
微信小程序wxml列表渲染原理解析
Nov 27 #Javascript
原生js实现下拉选项卡
Nov 27 #Javascript
浅析Vue下的components模板使用及应用
Nov 27 #Javascript
d3.js 地铁轨道交通项目实战
Nov 27 #Javascript
微信小程序表单验证WxValidate的使用
Nov 27 #Javascript
You might like
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
[原创]图片分页查看
2006/08/28 Javascript
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
python函数局部变量用法实例分析
2015/08/04 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
Python图算法实例分析
2016/08/13 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
查看Django和flask版本的方法
2018/05/14 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
如何编写python的daemon程序
2021/01/07 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
设计模式的基本要素是什么
2014/04/21 面试题
环保倡议书50字
2014/05/15 职场文书
网络舆情信息简报
2015/07/21 职场文书
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python