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读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
Javascript继承机制详解
May 30 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
快速解决element的autofocus失效问题
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读取IMAP邮件
2006/10/09 PHP
php随机输出名人名言的代码
2012/10/07 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
js实现文字截断功能
2016/09/14 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
python杀死一个线程的方法
2015/09/06 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
编辑硕士自荐信范文
2013/11/27 职场文书
新书吧创业计划书
2014/01/31 职场文书
总经理岗位职责描述
2014/02/08 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
怎样写观后感
2015/06/19 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏