JS实现省市区三级联动

最新推荐文章于 2024-06-16 14:06:27 发布

铸键为犁

最新推荐文章于 2024-06-16 14:06:27 发布

阅读量4.6k

点赞数 9

分类专栏： JavaWeb 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/l_zl2021/article/details/126554120

版权

JavaWeb 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

目标：

用JS实现省市区的三级联动效果

学习内容：

掌握JS对DOM元素的获取
掌握 JS对DOM元素的创建和删除
掌握JSON数组的简单解析

实现思路：

省市区三级联动主要是三个下拉菜单之间的联动效果，基本的需求是，当我点击第一级下拉菜单，第二级菜单的内容会自动匹配。选择第二级菜单时，第三级菜单会自动生成。当我取消上一级菜单的选项时，次一级选项会自动消失。

准备工作，搭建页面结构，编写基本样式，引入JQuery文件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				font-size: 30px;
			}
			.select{
				width: 300px;
				height: 50px;
				font-size: 28px;
			}
			#content{
				margin-left: 300px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div id="set">
				省：<select class="select" name="province" id="province">
						<option value="">---请选择---</option>
					</select>
				市：<select class="select" name="city" id="city">
						<option value="">---请选择---</option>
					 </select>
				区：<select class="select" name="region" id="region">
						<option value="">---请选择---</option>
					 </select>
			</div>
		</div>
	</body>
	<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	</script>
</html>

第一步，首先对于地名数据用JSON数组进行承载。当页面加载时对第一级下拉菜单进行自动生成。

//省名数据
var cityList = ["北京","上海","广州"];
//省和市数据
var cityParms = {"北京":["朝阳区","东城区","西城区"],
				  "上海":["黄浦区","徐汇区","闵行区","普陀区"],
				  "广州":["海珠区","天河区","白云区","花都区"]};
//城市的对应数据		  
var cityParmsList = {"朝阳区":["三里屯","香河园","和平街","潘家园"],
					"东城区":["东华门","安定门","朝阳门","建国门","东直门"],
					"西城区":["西长安","德胜街","大栅栏","什刹海"],
				    "黄浦区":["南京东路","外滩","豫园","五里桥"],
					"徐汇区":["天平路","凌云路","徐家汇","龙华街"],
					"闵行区":["江川路","新虹街","古美路","浦锦街"],
					"普陀区":["长寿路","甘泉路","宜川路"],
					"海珠区":["江海","瑞宝","沙园","滨江"],
					"天河区":["天园","龙洞","沙河","凤凰"],
					"白云区":["同德街","黄石街","金沙街","白云湖"],
					"花都区":["花城街","新华街","新雅街"]
					}
//第一级菜单初始化值					
for(var i = 0; i < cityList.length;i++ ){
	$("#province").append('<option value="'+cityList[i]+'">'+cityList[i]+'</option>');
}

第二步，当点击第一级菜单的选项，对于第二级选项进行自动生成。第一级选项空选时，对第二级菜单的内容进行清空。第三级的菜单内容也清空。

//监听第一个下拉菜单的变动操作
		$("#province").change(function(){
			//当第一级下拉列表没选择值时，将二级下拉列表和三级同时设置为空
			if(this.value==""){
				$("#city").empty();//二级联动设为空设为空
				$("#city").append('<option value="">---请选择---</option>');
				//region
				$("#region").empty();//三级联动设为空设为空
				$("#region").append('<option value="">---请选择---</option>');
				
			}
			if(this.value!=""){//第一级下拉菜单选择了值
				$("#city").empty();//先行置空，防止上次选择留下的元素影响效果
				$("#city").append('<option value="">---请选择---</option>')//设置初始选项
				$t = this.value;
				$titleList = cityParms[$t];//根据第一级的关键字，获得对应的市级数据
				 for(var i = 0; i < $titleList.length;i++){//遍历
					$("#city").append('<option value="'+$titleList[i]+'">'+$titleList[i]+'</option>');//创造元素
				}
			}
		});

第三步，当第二级菜单选择了某项，根据选项生成第三级菜单。当第二选项选择空的时候，对于第三级菜单进行清空。

//监听第二个下拉菜单的变动操作
		$("#city").change(function(){
			if(this.value==""){//第二级菜单为空，则将第三级菜单也置为空
				$("#region").empty();
				$("#region").append('<option value="">---请选择---</option>');
			}
			if(this.value!=""){//第二级菜单不为空，则将第三级菜单动态生成
				$t = this.value;
				$titleList = cityParmsList[$t];//根据第二级菜单的内容获得区数据
				 for(var i = 0; i < $titleList.length;i++){//对区数据进行遍历，动态生成
					$("#region").append('<option value="'+$titleList[i]+'">'+$titleList[i]+'</option>');
				}
			}
		})

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				font-size: 30px;
			}
			.select{
				width: 300px;
				height: 50px;
				font-size: 28px;
			}
			#content{
				margin-left: 300px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div id="set">
				省：<select class="select" name="province" id="province">
						<option value="">---请选择---</option>
					</select>
				市：<select class="select" name="city" id="city">
						<option value="">---请选择---</option>
					 </select>
				区：<select class="select" name="region" id="region">
						<option value="">---请选择---</option>
					 </select>
			</div>
		</div>
	</body>
	<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//省名数据
		var cityList = ["北京","上海","广州"];
		//省和市数据
		var cityParms = {"北京":["朝阳区","东城区","西城区"],
						  "上海":["黄浦区","徐汇区","闵行区","普陀区"],
						  "广州":["海珠区","天河区","白云区","花都区"]};
		//城市的对应数据		  
		var cityParmsList = {"朝阳区":["三里屯","香河园","和平街","潘家园"],
							"东城区":["东华门","安定门","朝阳门","建国门","东直门"],
							"西城区":["西长安","德胜街","大栅栏","什刹海"],
						    "黄浦区":["南京东路","外滩","豫园","五里桥"],
							"徐汇区":["天平路","凌云路","徐家汇","龙华街"],
							"闵行区":["江川路","新虹街","古美路","浦锦街"],
							"普陀区":["长寿路","甘泉路","宜川路"],
							"海珠区":["江海","瑞宝","沙园","滨江"],
							"天河区":["天园","龙洞","沙河","凤凰"],
							"白云区":["同德街","黄石街","金沙街","白云湖"],
							"花都区":["花城街","新华街","新雅街"]
							}
		//第一级菜单初始化值					
		for(var i = 0; i < cityList.length;i++ ){
			$("#province").append('<option value="'+cityList[i]+'">'+cityList[i]+'</option>');
		}
		//监听第一个下拉菜单的变动操作
		$("#province").change(function(){
			//当第一级下拉列表没选择值时，将二级下拉列表和三级同时设置为空
			if(this.value==""){
				$("#city").empty();//二级联动设为空设为空
				$("#city").append('<option value="">---请选择---</option>');
				//region
				$("#region").empty();//三级联动设为空设为空
				$("#region").append('<option value="">---请选择---</option>');
				
			}
			if(this.value!=""){
				$("#city").empty();
				$("#city").append('<option value="">---请选择---</option>')
				$t = this.value;
				$titleList = cityParms[$t];
				 for(var i = 0; i < $titleList.length;i++){
					$("#city").append('<option value="'+$titleList[i]+'">'+$titleList[i]+'</option>');
				}
			}
		});
		//监听第二个下拉菜单的变动操作
		$("#city").change(function(){
			if(this.value==""){
				$("#region").empty();
				$("#region").append('<option value="">---请选择---</option>');
			}
			if(this.value!=""){
				$t = this.value;
				$titleList = cityParmsList[$t];
				 for(var i = 0; i < $titleList.length;i++){
					$("#region").append('<option value="'+$titleList[i]+'">'+$titleList[i]+'</option>');
				}
			}
		})
		
	</script>
</html>