原生JS实现三级联动
代码实现
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS的三级联动</title>
<style>
.js-demo {
width: 700px;
margin: 0 auto;
padding-top: 100px;
}
select {
margin-right: 50px;
}
</style>
</head>
<body>
<div class="js-demo">
省份：
<select id="province"></select>
城市：
<select id="city"></select>
区县：
<select id="county"></select>
</div>
<script>
// ===== ===== ===== 获取select元素 ===== ===== =====
// 获取下拉表单
var select_province = document.getElementById('province');
var select_city = document.getElementById('city');
var select_county = document.getElementById('county');
// ===== ===== ===== 准备三级联动的数据 ===== ===== =====
// 省份
var arr_province = [
// 省份ID, 省份名称
{ id: 110000, name: '北京市' },
{ id: 120000, name: '天津市' },
{ id: 130000, name: '河北省' },
{ id: 140000, name: '山西省' },
{ id: 150000, name: '内蒙古自治区' },
{ id: 210000, name: '辽宁省' },
{ id: 220000, name: '吉林省' },
{ id: 230000, name: '黑龙江省' },
{ id: 310000, name: '上海市' },
{ id: 320000, name: '江苏省' }
];
// 城市
var arr_city = [
// 城市ID, 城市名称, 城市所属的省份（即本级的上一级的ID）
{ id: 110000, name: '北京市', province_id: 110000 },
{ id: 120000, name: '天津市', province_id: 120000 },
{ id: 320100, name: '南京市', province_id: 320000 },
{ id: 320200, name: '无锡市', province_id: 320000 },
{ id: 320300, name: '徐州市', province_id: 320000 },
{ id: 320400, name: '常州市', province_id: 320000 },
{ id: 320500, name: '苏州市', province_id: 320000 },
{ id: 320600, name: '南通市', province_id: 320000 },
{ id: 320700, name: '连云港市', province_id: 320000 },
{ id: 320800, name: '淮安市', province_id: 320000 }
];
// 区县
var arr_county = [
// 区县ID, 区县名称, 区县所属的城市（即本级的上一级的ID）
{ id: 110101, name: '东城区', city_id: 110000 },
{ id: 110102, name: '西城区', city_id: 110000 },
{ id: 110105, name: '朝阳区', city_id: 110000 },
{ id: 110106, name: '丰台区', city_id: 110000 },
{ id: 110107, name: '石景山区', city_id: 110000 },
{ id: 110108, name: '海淀区', city_id: 110000 },
{ id: 110109, name: '门头沟区', city_id: 110000 },
{ id: 110111, name: '房山区', city_id: 110000 },
{ id: 110112, name: '通州区', city_id: 110000 },
{ id: 110113, name: '顺义区', city_id: 110000 },
{ id: 110114, name: '昌平区', city_id: 110000 },
{ id: 110115, name: '大兴区', city_id: 110000 },
{ id: 110116, name: '怀柔区', city_id: 110000 },
{ id: 110117, name: '平谷区', city_id: 110000 },
{ id: 110118, name: '密云区', city_id: 110000 },
{ id: 110119, name: '延庆区', city_id: 110000 },
{ id: 320102, name: '玄武区', city_id: 320100 },
{ id: 320104, name: '秦淮区', city_id: 320100 },
{ id: 320105, name: '建邺区', city_id: 320100 },
{ id: 320106, name: '鼓楼区', city_id: 320100 },
{ id: 320111, name: '浦口区', city_id: 320100 },
{ id: 320113, name: '栖霞区', city_id: 320100 },
{ id: 320114, name: '雨花台区', city_id: 320100 },
{ id: 320115, name: '江宁区', city_id: 320100 },
{ id: 320116, name: '六合区', city_id: 320100 },
{ id: 320117, name: '溧水区', city_id: 320100 },
{ id: 320118, name: '高淳区', city_id: 320100 },
{ id: 320117, name: '溧水区', city_id: 320100 }
];
// ===== ===== ===== 给select填充数据的操作 ===== ===== =====
// 填充province
function addDataProvince() {
var html = "<option value='0'>请选择省份</option>";
var length = arr_province.length;
for (var i = 0; i < length; i++) {
html += "<option value='" + arr_province[i].id + "'>" + arr_province[i].name + "</option>";
}
select_province.innerHTML = html;
}
// 填充city
function addDataCity(provinceId) {
var html = "<option value='0'>请选择城市</option>";
var length = arr_city.length;
for (var i = 0; i < length; i++) {
var obj = arr_city[i];
if (obj.province_id == provinceId) {
html += "<option value='" + obj.id + "'>" + obj.name + "</option>";
}
}
select_city.innerHTML = html;
}
// 填充county
function addDataCounty(cityId) {
var html = "<option value='0'>请选择区县</option>";
var length = arr_county.length;
for (var i = 0; i < length; i++) {
var obj = arr_county[i];
if (obj.city_id == cityId) {
html += "<option value='" + obj.id + "'>" + obj.name + "</option>";
}
}
select_county.innerHTML = html;
}
// ===== ===== ===== 给select绑定change事件 ===== ===== =====
// select_province绑定change事件
select_province.onchange = function () {
var provinceId = select_province.value;
addDataCity(provinceId);
};
// select_city绑定change事件
select_city.onchange = function () {
var cityId = select_city.value;
addDataCounty(cityId);
};
// select初始化数据
addDataProvince();
addDataCity(arr_province[0].id);
addDataCounty(arr_city[0].id);
/* 核心思想就是，通过监听上一级的变化获得上级的value，进而改变本级显示的列表内容。*/
</script>
</body>
</html>
效果图如下：
本文链接：https://www.cnblogs.com/connect/p/web-three-level-linkage.html
原生JS实现三级联动的更多相关文章
- 插件 原生js 省市区 三级联动 源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- QQ JS省市区三级联动
如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...
- 从QQ网站中提取的纯JS省市区三级联动
在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...
- JS年月日三级联动下拉框日期选择代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- MVC图片上传详解 IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS C#中Enum用法小结 表达式目录树 “村长”教你测试用例 引用provinces.js的三级联动
MVC图片上传详解 MVC图片上传--控制器方法 新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFile ...
- JS 省市区三级联动
JS 省市区三级联动: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- JS省市区三级联动
不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...
- 使用腾讯IP分享计划网站中的纯JS省市区三级联动
JS地址:http://ip.qq.com/js/geo.js 实例如下: <!DOCTYPE html> <html> <head> <title>省 ...
- 引用provinces.js的三级联动
第一次写随笔 应该写的不是太好 请多多见谅 我这次是在网上发现了一个三级联动 也是给新人一个福利 这个是你需要新建个 JavaScript 文件 并复制到你新建的文件里面 var pr ...
随机推荐
- MyBatis-Plus初步使用
在使用mybatis的过程中,我们会发现需要自己写很多的mapper和mapper.xml配置文件,很多时候会写到相当多的重复代码,特别是普通的增删改查,这样不仅会影响我们的开发效率,也会使得代码变的 ...
- DOM对象和window对象
本文内容: DOM对象 Window 对象 首发日期:2018-05-11 DOM对象: DOM对象主要指代网页内的标签[包括整个网页] 比如:document代表整个 HTML 文档,用来访问页面中 ...
- Python 爬虫实例(爬百度百科词条)
爬虫是一个自动提取网页的程序,它为搜索引擎从万维网上下载网页,是搜索引擎的重要组成.爬虫从一个或若干初始网页的URL开始,获得初始网页上的URL,在抓取网页的过程中,不断从当前页面上抽取新的URL放入 ...
- 使用Visual Studio Team Services敏捷规划和项目组合管理（四）——冲刺计划和任务板
使用Visual Studio Team Services敏捷规划和项目组合管理(四)--冲刺计划和任务板 团队在sprint计划会议期间创建冲刺积压工作项,通常在冲刺的第一天召开该会议.每个冲刺都对 ...
- [转载] erp开发－数据查询优化方法
系统运行环境:MSSQL 2008随着公司业务快速发展,各种业务数据如火箭般的高速增长,出现一个又一个千万行数据的表,往往大表之间的关联,耗费系统大量的磁盘io,并且会影响正常的实时业务的操作,所以我 ...
- 常见 User-Agent 大全（自己在用）
分享几个常见的User-Agent吧,复制粘贴过来的,谢谢原创. window.navigator.userAgent 1) Chrome Win7: Mozilla/5.0 (Windows NT ...
- python while and for
一.while循环 1.格式: while 条件: while循环体 else: 循环正常跳出执行的语句 2.实例: index= : : break #直接跳出while ,不会执行else els ...
- 【Linux基础】crontab定时命令详解
周期执行的任务一般由cron这个守护进程来处理[ps -ef|grep cron].cron读取一个或多个配置文件,这些配置文件中包含了命令行及其调用时间.cron的配置文件称为“crontab”,是 ...
- J - Abbott's Revenge 搜索 寒假训练
题目 题目大意:这个题目就是大小不超过9*9的迷宫,给你起点终点和起点的方向,让你进行移动移动特别之处是不一定上下左右都可以,只有根据方向确定可以走的方向.思路:需要写一个读入函数,这个需要读入起点, ...
- OLTP与OLAP的区别
OLTP和OLAP的区别 联机事务处理OLTP(on-line transaction processing) 主要是执行基本日常的事务处理,比如数据库记录的增删查改.比如在银行的一笔交易记录,就是一 ...