JQuery应用案例--JQuery-MySql版：城市省份区域-三级联动

最新推荐文章于 2022-08-03 18:56:33 发布

君醉酒

最新推荐文章于 2022-08-03 18:56:33 发布

阅读量4.3k

点赞数

分类专栏： JQuery 文章标签：三级联动 mysql jquery

本文链接：https://blog.csdn.net/rain097790/article/details/11265855

版权

JQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

原：AJAX应用案例--基于mysql，以POST方式，完成三级级下拉联动【省份-城市-区域】

现改为JQuery版的三级联动，只需改动JSP页面代码，使用JQuery使得代码大大简化。

代码：

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	<script type="text/javascript" src="jquery-2.0.3.js"></script>
	</head>
  <body>
  	<select id="provinceID">
  		<option>请选择省份</option>
  		<option value="1">广东</option>
  		<option value="2">湖南</option>
  	</select>
  	<select id="cityID">
  		<option>请选择城市</option>
  	</select>
  	<select id="areaID">
  		<option>请选择区域</option>
  	</select>
  	<script type="text/javascript">
  		$("#provinceID").change(function(){
  			//当改变省份时需先清空城市列表和区域列表
  			$("#cityID option:not(:first)").remove();
  			$("#areaID option:not(:first)").remove();
  		
  			var url = "${pageContext.request.contextPath}/ProvinceCityAreaServlet?id="+new Date().getTime();
  			var provinceID =  $("#provinceID option:selected").val();
  			var sendData = {"method":"provinceToCity","provinceID":provinceID};	
  			//使用post方式提交数据		
  			$.post(url,sendData,function(backData){
  				var json = eval("("+backData+")");
  				for(var i=0; i<json.length; i++){
  					$("#cityID").append($("<option value="+json[i].id+">"+json[i].name+"</option>"));
  				}
  			});
  		});
  		
  		$("#cityID").change(function(){
  			//当改变城市列表和需先清空区域列表
  			$("#areaID option:not(:first)").remove();
  		
  			var url = "${pageContext.request.contextPath}/ProvinceCityAreaServlet?id="+new Date().getTime();
  			var cid =  $("#cityID option:selected").val();
  			var sendData = {"method":"cityToArea","cid":cid};	
  			//使用post方式提交数据		
  			$.post(url,sendData,function(backData){
  				var json = eval("("+backData+")");
  				for(var i=0; i<json.length; i++){
  					$("#areaID").append($("<option>"+json[i].name+"</option>"));
  				}
  			});
  		});
  		
  	</script>
  	
  	
  	
  </body>
</html>