JS实现省市县三级下拉联动


Posted in Javascript onApril 10, 2020

纯JS实现省市县三级下拉联动,供大家参考,具体内容如下

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>省市县三级下拉联动-李康</title>
 <style>
 fieldset{
 width: 25%;
 border: 1px dashed black;
 }
 legend{
 margin-left: 135px;
 }
 </style>
</head>
<body>
 <form action="">
 <fieldset>
 <legend>地址信息</legend>
 请选择居住地:<br><br>
 <select id="province" οnchange="chooseProvince(this)">
 <option value="1">--请选择省--</option>
 </select>
 <select id="city" οnchange="chooseCity(this)">
  <option value="2">--请选择市--</option>
 </select>
 <select id="area">
 <option value="3">--请选择区--</option>
 </select>
 </fieldset>
 </form>
 
 <script>
 var provinceList = [{
 name: '北京',
 cityList: [
 { name: '市辖区', areaList: ['东城区', '西城区', '崇文区', '宣武区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '怀柔区', '平谷区'] },
 { name: '县', areaList: ['密云县', '延庆县'] }]
 },{
 name: '河南',
 cityList: [
 { name: '郑州市', areaList: ['市辖区', '中原区', '二七区', '管城回族区', '金水区', '上街区', '邙山区', '中牟县', '巩义市', '荥阳市', '新密市', '新郑市', '登封市'] },
 { name: '开封市', areaList: ['市辖区', '龙亭区', '顺河回族区', '鼓楼区', '南关区', '郊 区', '杞 县', '通许县', '尉氏县', '开封县', '兰考县'] },
 { name: '洛阳市', areaList: ['市辖区', '老城区', '西工区', '廛河回族区', '涧西区', '吉利区', '洛龙区', '孟津县', '新安县', '栾川县', '嵩 县', '汝阳县', '宜阳县', '洛宁县', '伊川县', '偃师市'] },
 { name: '新乡市', areaList: ['市辖区', '红旗区', '卫滨区', '凤泉区', '牧野区', '新乡县', '获嘉县', '原阳县', '延津县', '封丘县', '长垣县', '卫辉市', '辉县市'] },
 { name: '焦作市', areaList: ['市辖区', '解放区', '中站区', '马村区', '山阳区', '修武县', '博爱县', '武陟县', '温 县', '济源市', '沁阳市', '孟州市'] }]
 },{
 name: '湖北',
 cityList: [
 { name: '武汉市', areaList: ['市辖区', '江岸区', '江汉区', '乔口区', '汉阳区', '武昌区', '青山区', '洪山区', '东西湖区', '汉南区', '蔡甸区', '江夏区', '黄陂区', '新洲区'] },
 { name: '黄石市', areaList: ['市辖区', '黄石港区', '西塞山区', '下陆区', '铁山区', '阳新县', '大冶市'] },
 { name: '十堰市', areaList: ['市辖区', '茅箭区', '张湾区', '郧 县', '郧西县', '竹山县', '竹溪县', '房 县', '丹江口市'] }]
 }
 ];
 var provinceArray = new Array();
 var cityArray = new Array();
 var areaArray = new Array();
 var provinceTag = document.getElementById("province");
 var cityTag = document.getElementById("city");
 var areaTag = document.getElementById("area");
 window.onload = function(){ //用window的onload事件,窗体加载完毕的时候
 var provinceTag = document.getElementById("province");
 var cityTag = document.getElementById("city");
 var areaTag = document.getElementById("area");
 for (var i = 0; i < provinceList.length; i++) {
 var province = provinceList[i]; //获取省
 var provinceName = province.name; //获取省名
 console.log(provinceName);
 provinceArray[i] = provinceName;
 provinceTag.add(new Option(provinceName, i));
 //通过Option方法将省名与下标对应,再将名字放到provinceTag中
 }
 }
 
 //建立省市之间的连接
 function chooseProvince(th) {
 var provinceTag = document.getElementById("province");
 var cityTag = document.getElementById("city");
 var areaTag = document.getElementById("area");
 var index = th.selectedIndex - 1; //“请选择省” 占了一个索引,所以需要减1
 var provinceName = provinceArray[index]; //获取省名
 for (var n = 0; n < provinceList.length; n++) {
 var provice = provinceList[n];
 console.log(provice.name == provinceName); //控制台打印方便观看
 if (provice.name == provinceName) { //开始建立连接,通过if判断,前提是要满足if中的条件
  cityList = provice.cityList; //通过province的cityList获取城市列表
  cityTag.innerHTML = ""; //保证city为所选中的省的市
  console.log(cityList); //控制台打印
  for (var c = 0; c < cityList.length; c++) {
  var city = cityList[c]; //获取城市
  var cityName = city.name; //获取城市名
  cityArray[c] = cityName;
  cityTag.add(new Option(cityName, c)); //使用Option()方法获取每一个索引对应的数据,然后使用add()方法存入到数组中去,创建省市连接
  }
 }
 }
 }
 
 // 建立市县之间的连接
 function chooseCity(ci) {
 var provinceTag = document.getElementById("province");
 var cityTag = document.getElementById("city");
 var areaTag = document.getElementById("area");
 var index = ci.selectedIndex;
 var cityName = cityArray[index];//获取城市名
 for (var j = 0; j < cityList.length; j++) {
 var city = cityList[j];//获取城市
 if (city.name == cityName) {
  var areaList = city.areaList;//县级列表数据
  areaTag.innerHTML = "";
  for (var k = 0; k < areaList.length; k++) {
  var area = areaList[k];//获取县
  areaTag.add(new Option(area, k));
  }
 }
 }
 }
 </script>
</body>
 
</html>

效果如下

JS实现省市县三级下拉联动

如果大家还想深入学习,可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

以上就是javascript实现省市区三级联动下拉框菜单的全部代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript之更有效率的字符串替换
Aug 02 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
react中使用swiper的具体方法
May 15 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 #Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 #Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 #Javascript
javascript实现贪吃蛇经典游戏
Apr 10 #Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 #Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 #Javascript
vue中的过滤器及其时间格式化问题
Apr 09 #Javascript
You might like
php格式化工具Beautify PHP小小BUG
2008/04/24 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
JQuery之拖拽插件实现代码
2011/04/14 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
python散点图实例之随机漫步
2018/08/27 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
《世界多美呀》教学反思
2014/03/02 职场文书
动员大会主持词
2014/03/20 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
2015年档案室工作总结
2015/05/23 职场文书
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript