原生JavaScript实现动态省市县三级联动下拉框菜单实例代码


Posted in Javascript onFebruary 03, 2016

像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能:

先给大家展示下测试结果:

未做任何选择时:

原生JavaScript实现动态省市县三级联动下拉框菜单实例代码

选择时:

原生JavaScript实现动态省市县三级联动下拉框菜单实例代码

代码如下所示:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>三级联动测试</title>
<script src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
//用来获得option元素中selected属性为true的元素的id
function Get_Selected_Id(place){
var pro = document.getElementById(place);
var Selected_Id = pro.options[pro.selectedIndex].id;
return Selected_Id; //返回selected属性为true的元素的id
}
//改变下一个级联的option元素的内容,即加载市或县
function Get_Next_Place(This_Place_ID,Action){
var Selected_Id = Get_Selected_Id(This_Place_ID); //Selected_Id用来记录当前被选中的省或市的ID
if(Action=='Get_city') //从而可以在下一个级联中加载相应的市或县
Add_city(Selected_Id);
else if(Action=='Get_country')
Add_country(Selected_Id);
}
//用来存储省市区的数据结构
var Place_dict = {
"GuangDong":{
"GuangZhou":["PanYu","HuangPu","TianHe"],
"QingYuan":["QingCheng","YingDe","LianShan"],
"FoShan":["NanHai","ShunDe","SanShui"]
},
"ShanDong":{
"JiNan":["LiXia","ShiZhong","TianQiao"],
"QingDao":["ShiNan","HuangDao","JiaoZhou"]
},
"HuNan":{
"ChangSha":["KaiFu","YuHua","WangCheng"],
"ChenZhou":["BeiHu","SuXian","YongXian"]
}
};
//加载城市选项
function Add_city(Province_Selected_Id){
$("#city").empty();
$("#city").append("<option>City</option>");
$("#country").empty();
$("#country").append("<option>Country</option>");
//上面的两次清空与两次添加是为了保持级联的一致性
var province_dict = Place_dict[Province_Selected_Id]; //获得一个省的字典
for(city in province_dict){ //取得省的字典中的城市
//添加内容的同时在option标签中添加对应的城市ID
var text = "<option"+" id='"+city+"'>"+city+"</option>";
$("#city").append(text);
console.log(text); //用来观察生成的text数据
}
}
//加载县区选项
function Add_country(City_Selected_Id){
$("#country").empty();
$("#country").append("<option>Country</option>");
//上面的清空与添加是为了保持级联的一致性
var Province_Selected_ID = Get_Selected_Id("province"); //获得被选中省的ID,从而方便在字典中加载数据
var country_list = Place_dict[Province_Selected_ID][City_Selected_Id]; //获得城市列表
for(index in country_list){
////添加内容的同时在option标签中添加对应的县区ID
var text = "<option"+" id=\'"+country_list[index]+"\'>"+country_list[index]+"</option>";
$("#country").append(text);
console.log(text); //用来观察生成的text数据
}
}
</script>
</head>
<body>
<p>您的收货地址:</p>
<select id="province" onchange="Get_Next_Place('province','Get_city')">
<option id="Not_data1">Province</option>
<option id="GuangDong" value="GuangDong">GuangDong</option>
<option id="ShanDong" value="ShanDong">ShanDong</option>
<option id="HuNan" value="HuNan">HuNan</option>
</select>
<select id="city" onchange="Get_Next_Place('city','Get_country')">
<option id="Not_data2">City</option>
</select>
<select id="country">
<option id="Not_data3">Country</option>
</select>
<br/>
</body>
</html>

当然,省市县三者都是动态联动的,只要顶级的内容发生改变,所有子级的内容也会发生改变或被重置为City或Country.

以上所述是小编给大家分享的原生JavaScript实现动态省市县三级联动下拉框菜单实例代码,希望对大家有所帮助。

Javascript 相关文章推荐
js面向对象 多种创建对象方法小结
May 21 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
json传值以及ajax接收详解
May 24 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
canvas的神奇用法
Feb 03 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
微信小程序点击滚动到指定位置的实现
May 22 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 #Javascript
javascript DIV实现跟随鼠标移动
Mar 19 #Javascript
javascript鼠标右键菜单自定义效果
Dec 08 #Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 #Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 #Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 #Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 #Javascript
You might like
一次编写,随处运行
2006/10/09 PHP
php笔记之:AOP的应用
2013/04/24 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
深入浅析JavaScript中的constructor
2016/04/19 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
Python实现发送email的几种常用方法
2014/08/18 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
python flask安装和命令详解
2019/04/02 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
群众路线教育实践活动方案
2014/10/31 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
基于tensorflow权重文件的解读
2021/05/26 Python
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫