代码改变世界

三级联动

2017-05-27 17:44  tlnshuju  阅读(246)  评论(0)    收藏  举报

效果图:



一、list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>   
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>list_tzq</title>
<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="list.js"></script>
</head>
<body>
	<select id="province" name="province">
		<option value="">请选择省</option>
	</select>
	<select id="city" name="city">
		<option value="">请选择市</option>
	</select>
	<select id="county" name="county">
		<option value="">请选择县</option>
	</select>
</body>
</html>

二、list.js

$(function(){
	
	$provinceSelect=$("#province");
	$citySelect=$("#city");
	$countySelect=$("#county");
	
	//显示第一级
	
	$.post("../ProvinceServlet",function(jsonArray){
			showProvinces(jsonArray);
	},"json");
	
	
	//显示第二级。给第一级的下拉选项加入单击响应事件
	$provinceSelect.change(function(){
		//每次请求都须要将city下拉列表清空。不然会累加
		//删除city的下拉<option>, 但第一个除外
		$citySelect.find("option:not(:first)").remove();
		//删除county的下拉<option>, 但第一个除外
		$countySelect.find("option:not(:first)").remove();
		
	var pid=this.value;
	if(pid=="") return ;
	
	$.post("../CityServlet",{pid:pid},function(jsonArray){
		showCitys(jsonArray);	
	},"json");
		
		
		
	});
	
	//显示第三级，给第二级的下拉选项加入单击响应事件
	$citySelect.change(function(){
		var cid=this.value;
		$.post("../CountyServlet",{cid:cid},function(jsonArray){
			showCountys(jsonArray);	
		},"json");
		
	});
	

	
	//显示省份
	function showProvinces(jsonArray){
		$.each(jsonArray,function(){
			var pid=this.pid;
			var pname=this.pname;
			$provinceSelect.append('<option value="'+pid+'">'+pname+'</option>');
		
		});
	}
	
	//显示市
	function showCitys(jsonArray){
		$.each(jsonArray,function(){
			var cid=this.cid;
			var cname=this.cname;
			$citySelect.append('<option value="'+cid+'">'+cname+'</option>');
			
		});
	}
	
	//显示县
	function showCountys(jsonArray){
		$.each(jsonArray,function(){
			var tid=this.tid;
			var tname=this.tname;
			$countySelect.append('<option value="'+tid+'">'+tname+'</option>');

		});
	}
		
});



三、servlet 

public class ProvinceServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private ProvinceDao dao=new ProvinceDao();
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		List<Province> list = dao.getAll();
		
		String json=new Gson().toJson(list);
		System.out.println(json);
		
		response.setContentType("text/json;charset=utf-8");
		response.getWriter().write(json);
		
	}

}

public class CityServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private CityDao cityDao=new CityDao();
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String pid = request.getParameter("pid");
		
		List<City> list = cityDao.getListByPid(pid);
		
		String json=new Gson().toJson(list);
		System.out.println(json);
		
		response.setContentType("text/json;charset=utf-8");
		response.getWriter().write(json);
	}

}

public class CountyServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private CountyDao countyDao=new CountyDao();
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("11111111");
		String cid = request.getParameter("cid");
		System.out.println(cid);
		
		List<County> list = countyDao.getListByCid(cid);
		String json=new Gson().toJson(list);
		System.out.println(json);
		
		response.setContentType("text/json;charset=utf-8");
		response.getWriter().write(json);
	}

}


四、dao和bean略