JavaScript实现省份城市的三级联动


Posted in Javascript onFebruary 11, 2020

本文实例为大家分享了js实现省份城市的三级联动的具体代码,供大家参考,具体内容如下

效果图:

JavaScript实现省份城市的三级联动

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 select{
  width: 80px;
  margin: 5px;
 }
 </style>
 <script>
 // 省份数组
 var provinceArr = ['上海', '江苏', '河北'];
   // 城市数组
   var cityArr = [
   ['上海市'],
  ['苏州市', '南京市', '扬州市'],
  ['石家庄', '秦皇岛', '张家口']
 ];
   // 区域数组
   var countryArr = [
   [
    ['黄浦区', '静安区', '长宁区', '浦东区']
   ],
   [
    ['虎丘区', '吴中区', '相城区', '姑苏区', '吴江区'],
    ['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区'],
    ['邗江区', '广陵区', '江都区']
   ],
   [
    ['长安区', '桥西区', '新华区', '井陉矿区'],
     ['海港区', '山海关区', '北戴河区', '抚宁区'],
     ['桥东区', '桥西区', '宣化区', '下花园区']
    ]
   ];
   window.onload = function(){
   var province = document.getElementById('province');
   var city = document.getElementById('city');
   var country = document.getElementById('country');
   createOption(province, provinceArr);
   province.onchange = function(){
    city.length = 0;
    createOption(city, cityArr[this.selectedIndex]);
    city.onchange();
   }
   city.onchange = function(){
    country.length = 0;
    createOption(country, countryArr[province.selectedIndex][this.selectedIndex]);
   }
   province.onchange();
   }
   function createOption(obj, data){
   for (var i = 0; i < data.length; i++) {
    var newOption = new Option(data[i], data[i]);
    obj.add(newOption, null);
   }
   }
 </script>
</head>
<body>
 省份<select name="" id="province"></select>
 城市<select name="" id="city"></select>
 区域<select name="" id="country"></select>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 #Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 #Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 #Javascript
JavaScript实现拖拽功能
Feb 11 #Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 #Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 #Javascript
原生js实现点击轮播切换图片
Feb 11 #Javascript
You might like
一个程序下载的管理程序(四)
2006/10/09 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
Prototype Date对象 学习
2009/07/12 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
公务员政审个人鉴定
2014/02/25 职场文书
2014年保洁工作总结
2014/11/24 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
初中作文评语集锦
2014/12/25 职场文书
文艺晚会开场白
2015/05/29 职场文书
委托收款证明
2015/06/23 职场文书
九年级化学教学反思
2016/02/22 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
部分武汉产收音机展览
2022/04/07 无线电