多级联动下拉菜单是前端常见的效果,省市区三级联动又属于其中最典型的案例。多级联动一般都是与数据相关联的,根据数据来生成和修改联动的下拉菜单。完成一个多级联动效果,有助于增强对数据处理的能力。

本实例以省市区三级联动为例,来说明具体是如何使用javascript来关联数据,实现联动下拉菜单。学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础。

这里先准备三个select元素,如下所示:

<div class="select_wrap">
<span>省:</span>
<select id="province">
<option value="">请选择</option>
</select>
<span>市:</span>
<select id="city">
<option value="">请选择</option>
</select>
<span>区/县:</span>
<select id="county">
<option value="">请选择</option>
</select>
</div>

再准备一些城市相关数据,本实例只列举了少量数量。如下所示:

var data = {
"北京市": {
"市辖区": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"]
},
"河北省": {
"石家庄市": ["长安区", "桥西区", "新华区", "井陉矿区", "裕华区", "藁城区", "鹿泉区", "栾城区", "井陉县", "正定县", "行唐县", "灵寿县", "高邑县", "深泽县", "赞皇县", "无极县", "平山县", "元氏县", "赵县", "石家庄高新技术产业开发区", "石家庄循环化工园区", "辛集市", "晋州市", "新乐市"],
"唐山市": ["路南区", "路北区", "古冶区", "开平区", "丰南区", "丰润区", "曹妃甸区", "滦县", "滦南县", "乐亭县", "迁西县", "玉田县", "唐山市芦台经济技术开发区", "唐山市汉沽管理区", "唐山高新技术产业开发区", "河北唐山海港经济开发区", "遵化市", "迁安市"],
"秦皇岛市": ["海港区", "山海关区", "北戴河区", "抚宁区", "青龙满族自治县", "昌黎县", "卢龙县", "秦皇岛市经济技术开发区", "北戴河新区"],
"邯郸市": ["邯山区", "丛台区", "复兴区", "峰峰矿区", "肥乡区", "永年区", "临漳县", "成安县", "大名县", "涉县", "磁县", "邱县", "鸡泽县", "广平县", "馆陶县", "魏县", "曲周县", "邯郸经济技术开发区", "邯郸冀南新区", "武安市"],
"衡水市": ["桃城区", "冀州区", "枣强县", "武邑县", "武强县", "饶阳县", "安平县", "故城县", "景县", "阜城县", "河北衡水经济开发区", "衡水滨湖新区", "深州市"]
},
"湖南省": {
"长沙市": ["芙蓉区", "天心区", "岳麓区", "开福区", "雨花区", "望城区", "长沙县", "浏阳市", "宁乡市"],
"株洲市": ["荷塘区", "芦淞区", "石峰区", "天元区", "株洲县", "攸县", "茶陵县", "炎陵县", "云龙示范区", "醴陵市"],
"湘潭市": ["雨湖区", "岳塘区", "湘潭县", "湖南湘潭高新技术产业园区", "湘潭昭山示范区", "湘潭九华示范区", "湘乡市", "韶山市"],
"衡阳市": ["珠晖区", "雁峰区", "石鼓区", "蒸湘区", "南岳区", "衡阳县", "衡南县", "衡山县", "衡东县", "祁东县", "衡阳综合保税区", "湖南衡阳高新技术产业园区", "湖南衡阳松木经济开发区", "耒阳市", "常宁市"],
},
"广东省": {
"广州市": ["荔湾区", "越秀区", "海珠区", "天河区", "白云区", "黄埔区", "番禺区", "花都区", "南沙区", "从化区", "增城区"],
"韶关市": ["武江区", "浈江区", "曲江区", "始兴县", "仁化县", "翁源县", "乳源瑶族自治县", "新丰县", "乐昌市", "南雄市"],
"深圳市": ["罗湖区", "福田区", "南山区", "宝安区", "龙岗区", "盐田区", "龙华区", "坪山区"],
"珠海市": ["香洲区", "斗门区", "金湾区"],
}
};

PS:实际工作的数据一般由数据库提供。如有需要也可以到网上搜索,很多大神都搜集有完整的城市数据。

准备好这些,我们按照惯例来分析功能,再一步一步完成。

1 分别获取省市县三个下拉框,如下所示:

var eProvince = document.getElementById('province');
var eCity = document.getElementById('city');
var eCounty = document.getElementById('county');

获取到这三个下拉框后,才可以通过操作数据来修改下拉框的选项。

2 遍历数据;
页面加载后,eProvince下拉框默认就应该是有数据的,所以需要遍历数据,并取出其中的省份相关数据,生成option元素放到eProvince下拉框中,如下所示:

for(let k in data){
//创建option元素
let eOption = document.createElement('option');
//设置option元素的值为数据中“省”的名称
eOption.value = k;
eOption.innerHTML = k;
//把option依次加入到eProvince下拉框中
eProvince.appendChild(eOption);
}

这时候点击省份下拉框,就可以看到下拉数据,如图所示:

3 省份下拉框绑定事件;
现在可以选择省份了,在下拉框中选择某个省,市下拉框就应该列出该省所包含的城市。所以需要给省份下拉框绑定一个change事件,如下所示:

eProvince.addEventListener('change',event=>{
//获取当前选择的省份值
let value = eProvince.value;
//修改省份后,城市和区/县下拉框中原有的值都会修改,直接通过修改eCity和eCounty元素innerHTML来初始化值
eCity.innerHTML = eCounty.innerHTML = '<option value="">请选择</option>';
//判断是否选择了省份
if(value!=''){
//在数据中遍历省份对应的城市
for(let k in data[value]){
//创建option元素
let eOption = document.createElement('option');
//设置option元素的值为数据中“城市”的名称
eOption.value = k;
eOption.innerHTML = k;
//把option依次加入到eCity下拉框中
eCity.appendChild(eOption);
}
}
});

选择省份之后,可以看到城市下拉框中也有了该省所包含的城市数据,如图所示:

4 城市下拉框绑定事件;
现在可以选择城市了,这时候选择城市,区/县下拉框就应该列出该市对应的区/县数据,如下所示:

//城市改变时,把对应的数据放到区/县下拉框中
eCity.addEventListener('change',event=>{
//获取已选择的省份值
let sProvince = eProvince.value;
//获取当前选择的城市值
let sCity = eCity.value;
//找到对应城市数据
let arr = data[sProvince][sCity];
//初始化eCounty元素中原有的值
eCounty.innerHTML = '<option value="">请选择</option>';
//判断是否选择的是城市名,而不是选择“请选择”
if(sCity!=''){
//遍历城市中对应的区/县数据
for(let i=0;i<arr.length;i++){
//创建option元素
let eOption = document.createElement('option');
//设置option元素的值为数据中“区/县”的名称
eOption.value = arr[i];
eOption.innerHTML = arr[i];
//把option依次加入到eCounty下拉框中
eCounty.appendChild(eOption);
}
}
});

好了,到这里就完成了一个简单的省市区三级联动。选择城市后,区/县下也有对应的下拉数据,如图所示:

原生javascript制作省市区三级联动详细教程的更多相关文章

  1. 原生javascript实现省市区三级联动

    腾讯IP分享计划(http://ip.qq.com/)有个现成的三级联动功能,查看源码后发现可以直接使用其单独的JS文件(http://ip.qq.com/js/geo.js). 分析后发现自己需要写 ...

  2. 【原生js】原生js的省市区三级联动

    html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  3. 【JavaScript&jQuery】省市区三级联动

    HTML: <%@page import="com.mysql.jdbc.Connection"%> <%@ page language="java&q ...

  4. 插件 原生js 省市区 三级联动 源码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 省市区三级联动——思路、demo、示例

    说明(2017-12-13 11:03:58): 1. 这个功能应该是注册的时候非常.常用的了,不过现在都是微信登录,手机端自动获取位置什么的,可能就网站还用用吧! 2. 这个东西的难点在于统计各地省 ...

  6. JS实现年月日三级联动+省市区三级联动+国家省市三级联动

    开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...

  7. 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理(在线下单)

    1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...

  8. JS省市区三级联动

    不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...

  9. QQ JS省市区三级联动

    如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...

随机推荐

  1. 纯css 实现文本换行

    业务场景:dialog中嵌套的表单,实现信息展示,由于存储路径过长并且在一行显示,导致多出的文字出现在弹出框外面了,页面极丑,所以需要将存储路径实现自动换行. 技术点:<p style=&quo ...

  2. 【Jmeter Linux环境下运行方法】

    Jmeter 运行 1.cd  jmeter/apache-jmeter-4.0/bin 2.执行 ./jmeter -n -t jmx脚本文件 -l 测结果.jtl文件 -e -o html文件路径 ...

  3. ubuntu 16.04安装adobe reader

    终端输入:wget ftp://ftp.adobe.com/pub/adobe/reader/unix/9.x/9.5.5/enu/AdbeRdr9.5.5-1_i386linux_enu.deb s ...

  4. [日常摸鱼]bzoj2875[NOI2012]随机数生成器-矩阵快速幂

    好裸的矩阵快速幂-然而我一开始居然构造不出矩阵- 平常两个的情况都是拿相邻两项放在矩阵里拿去递推的-然后我就一直构造不出来-其实把矩阵下面弄成1就好了啊orz #include<cstdio&g ...

  5. [日常摸鱼]Luogu1801 黑匣子(NOI导刊)

    题意:写一个数据结构,要求滋兹两种操作,ADD:插入一个数,GET:令$i++$然后输出第$i$小的数 这个数据结构当然是平衡树啦!(雾) 写个Treap直接过掉啦- #include<cstd ...

  6. windows jupyter lab中.ipynb转中文PDF

    在jupyter lab中,File-Export Notebook as-Export Notebook to PDF,可以导出成PDF格式的文档,但在操作前需要安装些程序.1. 安装pandocA ...

  7. 多任务-python实现-进程(2.1.7)

    @ 目录 1.进程是什么 2.进程的生命周期 3.Python中多进程的实现 4.进程和线程的区别 1.进程是什么 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源 ...

  8. 使用 vue 仿写的一个购物商城

    在学习了 vue 之后,决定做一个小练习,仿写了一个有关购物商城的小项目.下面就对项目做一个简单的介绍. 项目源码: github 项目的目录结构 -assets 与项目有关的静态资源,包括 css, ...

  9. 使用Github快速的寻找项目

    作为一个3年的码农昨天在学习项目,顺便总结一下 ,在Github找项目的几个常用方式 ,如果对您有帮助,可以点个关注,便于下次光顾! 首先我们来看一下常用命令 1.指定搜索方式 搜索文件中有spiri ...

  10. openstack高可用集群21-生产环境高可用openstack集群部署记录

    第一篇 集群概述 keepalived + haproxy +Rabbitmq集群+MariaDB Galera高可用集群   部署openstack时使用单个控制节点是非常危险的,这样就意味着单个节 ...