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 相关文章推荐
JavaScript单元测试ABC
Apr 12 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
Javascript实现的StopWatch功能示例
Jun 13 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 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
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
php读取csc文件并输出
2015/05/21 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
Js动态创建div
2008/09/25 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
公司周年庆典邀请函
2014/01/12 职场文书
教师演讲稿开场白
2014/08/25 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
涨价通知怎么写
2015/04/23 职场文书