效果图:
一、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>');
});
}
});
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略