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 检测浏览器和操作系统的脚本
Dec 26 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
React服务端渲染原理解析与实践
Mar 04 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仿discuz分页效果代码
2008/10/02 PHP
一个php Mysql类 可以参考学习熟悉下
2009/06/21 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
使用js实现数据格式化
2014/12/03 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Python3读取文件常用方法实例分析
2015/05/22 Python
python+django快速实现文件上传
2016/10/24 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
学校门卫管理制度
2014/01/30 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
物流专业求职信
2014/06/30 职场文书
整改落实自查报告
2014/11/05 职场文书
年底个人总结范文
2015/03/10 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
酒会开场白大全
2015/06/01 职场文书
在校学生证明格式
2015/06/24 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle