原生JavaScript实现的简单省市县三级联动功能示例


Posted in Javascript onMay 27, 2017

本文实例讲述了原生JavaScript实现的简单省市县三级联动功能。分享给大家供大家参考,具体如下:

三级联动是我们写表单时必不可少的,比如在写收货地址时,就用到他了,最近在看原生JavaScript,从基础写起,待完善,以后再写个jquery版的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动菜单</title>
<style>
select {
font-family: "萝莉体 第二版";
}
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<select id="province">
<option>-请选择-</option>
</select>
<select id="city" class="hide">
<option>-请选择-</option>
</select>
<select id="area" class="hide">
<option>-请选择-</option>
</select>
</div>
<script>
var provinceList = ['北京市', '河北省', '浙江省'];
var cityList = [['东城区', '西城区', '海淀区'], ['廊坊市', '唐山市', '石家庄市', '承德市'], ['杭州市', '温州市', '宁波市', '嘉兴市', '绍兴市']];
var areasList = [
[
['东城区1', '东城区2', '东城区3'],
['西城区1', '西城区2', '西城区3'],
['海淀区1', '海淀区2', '海淀区3']
],
[
['廊坊市1', '廊坊市2', '廊坊市3', '廊坊市4'],
['唐山市1', '唐山市2', '唐山市3', '唐山市4'],
['石家庄市1', '石家庄市2', '石家庄市3', '石家庄市4'],
['承德市1', '承德市2', '承德市3', '承德市4']
],
[
['杭州市1', '杭州市2', '杭州市3', '杭州市4', '杭州市5'],
['温州市1', '温州市2', '温州市3', '温州市4', '温州市5'],
['宁波市1', '宁波市2', '宁波市3', '宁波市4', '宁波市5'],
['嘉兴市1', '嘉兴市2', '嘉兴市3', '嘉兴市4', '嘉兴市5'],
['绍兴市1', '绍兴市2', '绍兴市3', '绍兴市4', '绍兴市5']
]
];
//1.获取元素
var province = document.getElementById("province");
var city = document.getElementById("city");
var area = document.getElementById("area");
//2.给省的选择框赋值,
// ----使用自执行函数,避免污染全局变量-----
(function () {
for (var i = 0; i < provinceList.length; i++) {
var myOption = document.createElement("option");
myOption.innerHTML = provinceList[i];
//设置value值
myOption.value = i;
province.appendChild(myOption);
}
})();
//3.设置选择省的行为函数
province.onchange = function (e) {
city.style.display = "inline-block"; //设置第二个出现
while (city.children.length > 1) { //当省设置为“请选择”时,移除子元素
city.removeChild(city.lastElementChild);
}
while (area.children.length > 1) { //当市设置为“请选择”时,移除子元素
area.removeChild(area.lastElementChild);
}
if (cityList[this.value]) {//当设置为请选择时不显示列表
for (var i = 0; i < cityList[this.value].length; i++) { //添加市的列表
var myOption = document.createElement("option");
myOption.innerHTML = cityList[this.value][i];
//设置value值
myOption.value = i;
city.appendChild(myOption);
}
}
};
//4.设置选择市的行为函数
city.onchange = function (e) {
area.style.display = "inline-block"; //设置第二个出现
while (area.children.length > 1) { //当市设置为“请选择”时,移除子元素
area.removeChild(area.lastElementChild);
}
if (areasList[province.value][this.value]) {//当设置为"请选择"时不显示列表
for (var i = 0; i < areasList[province.value][this.value].length; i++) { //添加市的列表
var myOption = document.createElement("option");
myOption.innerHTML = areasList[province.value][this.value][i];
area.appendChild(myOption);
}
}
}
</script>
</body>
</html>

运行效果图如下:

原生JavaScript实现的简单省市县三级联动功能示例

更多关于JavaScript相关内容可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
走出JavaScript初学困境—js初学
Dec 29 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
javascript自定义的addClass()方法
May 28 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 #Javascript
详细讲解vue2+vuex+axios
May 27 #Javascript
AngularJS获取json数据的方法详解
May 27 #Javascript
vue中用H5实现文件上传的方法实例代码
May 27 #Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 #Javascript
详解如何使用webpack打包Vue工程
May 27 #Javascript
Jquery中attr与prop的区别详解
May 27 #jQuery
You might like
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
Python实现多线程下载文件的代码实例
2014/06/01 Python
python使用多线程不断刷新网页的方法
2015/03/31 Python
详解python中的json的基本使用方法
2016/12/21 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
深入浅析Python传值与传址
2018/07/10 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
写好自荐信的几个要点
2013/12/26 职场文书
元旦晚会策划方案
2014/02/18 职场文书
二年级评语大全
2014/04/23 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
vue动态绑定style样式
2022/04/20 Vue.js