原生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 相关文章推荐
理解Javascript_08_函数对象
Oct 15 Javascript
js数组的操作详解
Mar 27 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
PHP生成压缩文件实例
2015/02/07 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
js实现字符全排列算法的简单方法
2017/05/01 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
pandas的相关系数与协方差实例
2019/12/27 Python
销售实习自我鉴定
2013/12/07 职场文书
教师旷工检讨书
2014/01/18 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
Django模型层实现多表关系创建和多表操作
2021/07/21 Python