web三级联动选择地址

最新推荐文章于 2023-09-23 13:15:52 发布

给我瓶叶小白

最新推荐文章于 2023-09-23 13:15:52 发布

阅读量1.7k

点赞数

分类专栏： java web 文章标签：三级联动 web地址三级联动

本文链接：https://blog.csdn.net/yjz_sdau/article/details/79810400

版权

java web 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

地址三级联动，依赖城市city.js文件

<script type="text/javascript" src="jquery/jquery-2.2.4.min.js"></script>
<!-- 三级联动城市划分js -->
<script type="text/javascript" src="js/city.js"></script>

然后再script中初始化列表

<script type="text/javascript">	
	//三级联动
	//设置省份初始化
$(function(){
	
	var html="";
	$.each(city.citylist,function(index,item){
		html+="<option value='"+item.p+"'>"+item.p+"</option>";
	})
	
	$("select[name='province']").html(html);
	
	
	//
	html="";
	$.each(city.citylist,function(index,item){
		if(item.p=="北京"){
			$.each(item.c,function(index,c){
				html+="<option value='"+c.n+"'>"+c.n+"</option>";
			})
		}
	});
	$("select[name='prefecture']").html(html);
	
	
	//省份改变时候，市区做相应的改变
	$("select[name='province']").change(function(){
		var p=$("select[name='province']").val();
		//设置清空乡镇残余文字。
		$("select[name='county']").html("");
		
		html="";
		$.each(city.citylist,function(index,item){
			if(item.p==p){
				$.each(item.c,function(index,c){
					html+="<option value='"+c.n+"'>"+c.n+"</option>";
				})
			}
		});
		
		$("select[name='prefecture']").html(html);
	});
	
	$("select[name='prefecture']").change(function(){
		var p=$("select[name='province']").val();
		var c=$("select[name='prefecture']").val();
		
		html="";
		$.each(city.citylist,function(index,item){
			
			if(p==item.p){
				
				$.each(item.c,function(index,city){
					
					if(c==city.n){
						
						$.each(city.a,function(index,a){
							
							html+="<option value='"+a.s+"'>"+a.s+"</option>";
												
						})
					}
				});
			}
		});
		$("select[name='county']").html(html);
	})
});
	</script>

在body中显示标签

	<div>
				<label>城市：</label>
				<div>
					<select name="province" id="province"></select>
				</div>
			</div>
			<div>
				<div>
					<select name="prefecture" id="prefecture"></select>
				</div>
			</div>
			<div>
				<div>
					<select name="county" id="county"></select>
				</div>
			</div>

整个页面为：

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base href="<%=basePath%>">
<title>用户注册</title>
<script type="text/javascript" src="jquery/jquery-2.2.4.min.js"></script>
<!-- 三级联动城市划分js -->
<script type="text/javascript" src="js/city.js"></script>
<script type="text/javascript">	
	//三级联动
	//设置省份初始化
$(function(){
	
	var html="";
	$.each(city.citylist,function(index,item){
		html+="<option value='"+item.p+"'>"+item.p+"</option>";
	})
	
	$("select[name='province']").html(html);
	
	
	//
	html="";
	$.each(city.citylist,function(index,item){
		if(item.p=="北京"){
			$.each(item.c,function(index,c){
				html+="<option value='"+c.n+"'>"+c.n+"</option>";
			})
		}
	});
	$("select[name='prefecture']").html(html);
	
	
	//省份改变时候，市区做相应的改变
	$("select[name='province']").change(function(){
		var p=$("select[name='province']").val();
		//设置清空乡镇残余文字。
		$("select[name='county']").html("");
		
		html="";
		$.each(city.citylist,function(index,item){
			if(item.p==p){
				$.each(item.c,function(index,c){
					html+="<option value='"+c.n+"'>"+c.n+"</option>";
				})
			}
		});
		
		$("select[name='prefecture']").html(html);
	});
	
	$("select[name='prefecture']").change(function(){
		var p=$("select[name='province']").val();
		var c=$("select[name='prefecture']").val();
		
		html="";
		$.each(city.citylist,function(index,item){
			
			if(p==item.p){
				
				$.each(item.c,function(index,city){
					
					if(c==city.n){
						
						$.each(city.a,function(index,a){
							
							html+="<option value='"+a.s+"'>"+a.s+"</option>";
												
						})
					}
				});
			}
		});
		$("select[name='county']").html(html);
	})
});
	</script>
</head>
<body>
			<div>
				<label>城市：</label>
				<div>
					<select name="province" id="province"></select>
				</div>
			</div>
			<div>
				<div>
					<select name="prefecture" id="prefecture"></select>
				</div>
			</div>
			<div>
				<div>
					<select name="county" id="county"></select>
				</div>
			</div>



</body>
</html>