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 解析url的search方法
Feb 09 Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
js+css实现打字效果
Jun 24 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 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
sql注入与转义的php函数代码
2013/06/17 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
JS画线(实例代码)
2013/11/20 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
简单了解什么是神经网络
2017/12/23 Python
python之消除前缀重命名的方法
2018/10/21 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
构建高效的python requests长连接池详解
2020/05/02 Python
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
小学运动会表扬稿
2014/01/19 职场文书
材料加工工程求职信
2014/02/19 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
道德与公民自我评价
2015/03/09 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
党小组推荐意见
2015/06/02 职场文书
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android