效果图:
一、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略