JS实现省市区三级联动

àì夳堔傛蜴生んèń 2024-04-08 12:46 69阅读 0赞

## 目标： ##

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

--------------------

## 学习内容： ##

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

--------------------

## 实现思路： ##

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

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

第一步，首先对于地名数据用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>

--------------------

## 效果演示： ##

![在这里插入图片描述][4df97051f55947afb2d79fcf468ce285.gif_pic_center]

[4df97051f55947afb2d79fcf468ce285.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/b34b24fbedfd422eb8dc1f7c53610a9e.gif