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用typeof方法判断undefined类型
Jul 15 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
vue实现搜索过滤效果
May 28 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
element中el-container容器与div布局区分详解
May 13 Javascript
微信小程序实现watch监听
Jun 04 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
967 个函式
2006/10/09 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
js function使用心得
2010/05/10 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
必须要使用游标的SQL语句有那些
2012/05/07 面试题
建筑文秘专业个人求职信范文
2013/12/28 职场文书
秋季运动会稿件
2014/01/30 职场文书
文明市民先进事迹
2014/05/15 职场文书
关于环保的宣传稿
2015/07/23 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL