本文实例讲述了原生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
# 省市县
# 三级联动
# PHP+Mysql+Ajax+JS实现省市区三级联动
# JS制作简单的三级联动
# jquery+json 通用三级联动下拉列表
# js实现一个省市区三级联动选择框代码分享
# 省市区三级联动下拉框菜单javascript版
# ASP+JS三级联动下拉菜单[调用数据库数据]
# 从QQ网站中提取的纯JS省市区三级联动菜单
# asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery
# jQuery+jsp实现省市县三级联动效果(附源码)
# js操纵跨frame的联动select下拉选项实例介绍
# 原生js三级联动的简单实现代码
# js实现简单的省市县三级联动效果实例
# 绍兴市
# 嘉兴市
# 承德市
# 廊坊市
# 温州市
# 宁波市
# 请选择
# 唐山市
# 杭州市
# 石家庄市
# 西城区
# 东城区
# 海淀区
# 设置为
# 移除
# 第二个
# 相关内容
# 河北省
# 遍历
# 浙江省
相关文章:
如何高效搭建专业期货交易平台网站?
西安制作网站公司有哪些,西安货运司机用的最多的app或者网站是什么?
实惠建站价格推荐:2025年高性价比自助建站套餐解析
开源网站制作软件,开源网站什么意思?
建站之星如何取消后台验证码生成?
seo网站制作优化,网站SEO优化步骤有哪些?
早安海报制作网站推荐大全,企业早安海报怎么每天更换?
南阳网站制作公司推荐,小学电子版试卷去哪里找资源好?
c++ stringstream用法详解_c++字符串与数字转换利器
如何在景安服务器上快速搭建个人网站?
建站主机服务器选型指南与性能优化方案解析
如何通过万网虚拟主机快速搭建网站?
如何选择建站程序?包含哪些必备功能与类型?
如何高效利用200m空间完成建站?
如何零基础开发自助建站系统?完整教程解析
在线教育网站制作平台,山西立德教育官网?
黑客入侵网站服务器的常见手法有哪些?
网站微信制作软件,如何制作微信链接?
高端企业智能建站程序:SEO优化与响应式模板定制开发
如何用5美元大硬盘VPS安全高效搭建个人网站?
建站OpenVZ教程与优化策略:配置指南与性能提升
C++如何编写函数模板?(泛型编程入门)
定制建站模板如何实现SEO优化与智能系统配置?18字教程
制作农业网站的软件,比较好的农业网站推荐一下?
,购物网站怎么盈利呢?
建站VPS配置与SEO优化指南:关键词排名提升策略
如何高效完成独享虚拟主机建站?
浅析上传头像示例及其注意事项
网站制作专业公司有哪些,如何制作一个企业网站,建设网站的基本步骤有哪些?
建站之星在线版空间:自助建站+智能模板一键生成方案
建站之星2.7模板快速切换与批量管理功能操作指南
网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊,能赚钱吗?
开心动漫网站制作软件下载,十分开心动画为何停播?
建站10G流量真的够用吗?如何应对访问高峰?
建站之星如何开启自定义404页面避免用户流失?
如何在香港服务器上快速搭建免备案网站?
建站之星导航如何优化提升用户体验?
如何在橙子建站上传落地页?操作指南详解
如何在阿里云虚拟服务器快速搭建网站?
如何在宝塔面板中修改默认建站目录?
已有域名能否直接搭建网站?
猪八戒网站制作视频,开发一个猪八戒网站,大约需要多少?或者自己请程序员,需要什么程序员,多少程序员能完成?
合肥做个网站多少钱,合肥本地有没有比较靠谱的交友平台?
学生网站制作软件,一个12岁的学生写小说,应该去什么样的网站?
详解ASP.NET 生成二维码实例(采用ThoughtWorks.QRCode和QrCode.Net两种方式)
如何通过老薛主机一键快速建站?
网站制作需要会哪些技术,建立一个网站要花费多少?
贸易公司网站制作流程,出口贸易网站设计怎么做?
Swift中swift中的switch 语句
惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样?
*请认真填写需求信息,我们会在24小时内与您取得联系。