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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
vue之debounce属性被移除及处理详解
Nov 13 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
微信小程序实现首页弹出广告
Dec 03 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
elgg 获取文件图标地址的方法
2010/03/20 PHP
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
Nginx实现反向代理
2017/09/20 Servers
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
python实现爬山算法的思路详解
2019/04/09 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
Python各种扩展名区别点整理
2020/02/27 Python
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
PHP面试题附答案
2015/11/28 面试题
民间借贷纠纷案件代理词
2015/05/26 职场文书
施工现场安全管理制度
2015/08/05 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript