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 相关文章推荐
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
ExtJS的FieldSet的column列布局
Nov 20 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
谈谈JavaScript中的函数
Sep 08 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脚本的10个技巧(1)
2006/10/09 PHP
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
教你学会使用Python正则表达式
2017/09/07 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
毕业求职自荐信格式是什么
2013/11/19 职场文书
车贷收入证明范本
2014/01/09 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
2014年绿化工作总结
2014/12/09 职场文书
开会通知
2015/04/20 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
大学学生会竞选稿
2015/11/19 职场文书
公司转让协议书
2016/03/19 职场文书