原生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实现动态省市县三级联动下拉框菜单实例代码，希望对大家有所帮助。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何在浏览器中优化JavaScript代码以进行性能？
Mar 18, 2025 pm 03:14 PM
本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。
如何使用浏览器开发人员工具有效调试JavaScript代码？
Mar 18, 2025 pm 03:16 PM
本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。
如何使用源地图调试缩小JavaScript代码？
Mar 18, 2025 pm 03:17 PM
本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图，设置断点以及使用Chrome DevTools和WebPack之类的工具。
如何有效地使用Java的收藏框架？
Mar 13, 2025 pm 12:28 PM
本文探讨了Java收藏框架的有效使用。 它强调根据数据结构，性能需求和线程安全选择适当的收集（列表，设置，地图，队列）。 通过高效优化收集用法
初学者的打字稿，第2部分：基本数据类型
Mar 19, 2025 am 09:10 AM
掌握了入门级TypeScript教程后，您应该能够在支持TypeScript的IDE中编写自己的代码，并将其编译成JavaScript。本教程将深入探讨TypeScript中各种数据类型。 JavaScript拥有七种数据类型：Null、Undefined、Boolean、Number、String、Symbol（ES6引入）和Object。TypeScript在此基础上定义了更多类型，本教程将详细介绍所有这些类型。 Null数据类型 与JavaScript一样，TypeScript中的null
开始使用Chart.js：PIE，DONUT和BUBBLE图表
Mar 15, 2025 am 09:19 AM
本教程将介绍如何使用 Chart.js 创建饼图、环形图和气泡图。此前，我们已学习了 Chart.js 的四种图表类型：折线图和条形图（教程二），以及雷达图和极地区域图（教程三）。 创建饼图和环形图 饼图和环形图非常适合展示某个整体被划分为不同部分的比例。例如，可以使用饼图展示野生动物园中雄狮、雌狮和幼狮的百分比，或不同候选人在选举中获得的投票百分比。 饼图仅适用于比较单个参数或数据集。需要注意的是，饼图无法绘制值为零的实体，因为饼图中扇形的角度取决于数据点的数值大小。这意味着任何占比为零的实体
