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 自动安装exe程序
Nov 30 Javascript
了解jQuery技巧来提高你的代码
Jan 08 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
jquery实现全屏滚动
Dec 28 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
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
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
网页中的图片的处理方法与代码
2009/11/26 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
Python使用plotly绘制数据图表的方法
2017/07/18 Python
python中sys.argv函数精简概括
2018/07/08 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
python list转置和前后反转的例子
2019/08/26 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
Linux常见面试题
2013/03/18 面试题
小学向国旗敬礼活动方案
2014/09/27 职场文书
邀请函的格式
2015/01/30 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
楚门的世界观后感
2015/06/03 职场文书
环保主题班会教案
2015/08/13 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
把77A收信机改造成收音机
2022/04/05 无线电