javascript省市区三级联动下拉框菜单实例演示
更新时间：2021年09月23日 14:49:08 投稿：lijiao
这篇文章主要为大家详细介绍了javascript实现省市区三级联动下拉框菜单很详细的代码，解决了大家实现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>
如果大家还想深入学习，可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。
这个实例就是类似在淘宝购物时填写收货地址，实现省市县的三级联动，希望大家可以应用到自己的作品中，学以致用。
相关文章
这篇文章主要为大家详细介绍了微信小程序实现下拉筛选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
在JavaScript中对象是一种基本的数据类型，在数据结构上是一种散列表，可以看作是属性的无序集合，除了原始值其他一切都是对象。这篇文章主要给大家介绍JavaScript学习笔记之创建对象，需要的朋友参考下吧2016-03-03
前端在处理小数或大整数时,由于 JavaScript 的 Number 类型使用 IEEE 754 双精度浮点数表示,可能会出现精度丢失问题（如 0.1 + 0.2 = 0.30000000000000004）,以下是常见的解决方案,需要的朋友可以参考下2025-03-03
这篇文章主要为大家详细介绍了微信小程序实现多列选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了javascript实现九宫格相加数值相等的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-02-02
javascript中的遍历方法有很多,今天主要总结一下这些遍历方法如何跳出循环,这篇文章主要给大家介绍了关于如何跳出map或者foreach循环的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了js Math数学简单使用,结合实例形式分析了js Math数学相关函数的基本用法与操作注意事项,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了wavesurfer.js绘制音频波形图的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
程序中通过点击一个“发货提醒”链接弹出另一个窗口，使用的方法是用javascript 的openUrl()方法。2011-04-04
js 剪切板的用法(clipboardData.setData)与js match函数介绍
这篇文章主要是对js中剪切板的使用方法(clipboardData.setData)与js中的match函数进行了介绍。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
最新评论