标签：lex name text class private 下拉列表 tac catch 市级
bean
/** * 市 * @author Administrator *下午3:37:43 */ public class City { private int id; //序号 private int cityid; private String cityname; //城市名称 }
/** * 省 * @author Administrator *下午3:37:57 */ public class Province { private int id; //序号 private int provinceId; private String province; //省名 private List<City> cities; //每个省下面的每个城市
}
dao.impl
public class ProvinceDaoImpl implements ProvinceDao{ QueryRunner qr = new QueryRunner(C3p0Util.getDataSource()); //c3p0连接池连接数据库 @Override //查找所有省的集合 public List<Province> findPros() { String sql = "select * from provinces"; List<Province> plist = null; try { plist = qr.query(sql, new BeanListHandler<Province>(Province.class)); } catch (SQLException e) { e.printStackTrace(); } for(Province p : plist){ List<City> findCitiesByProID = findCitiesByProID(p.getProvinceId()); p.setCities(findCitiesByProID); } return plist; } @Override //使用proid查找每个省相对应的城市 public List<City> findCitiesByProID(int proid) { String querySql = "select * from citys where proid=?"; List<City> cities = null; try { cities = qr.query(querySql, new BeanListHandler<City>(City.class), proid); } catch (SQLException e) { e.printStackTrace(); } return cities; } }
Servlet
@WebServlet(name="proCityServlet",value="/proCityServlet") //注解配置 public class ProCityServlet extends HttpServlet { private ProvinceDao dao = new ProvinceDaoImpl(); public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html; charset=UTF-8"); //响应编码格式 response.setCharacterEncoding("UTF-8"); List<Province> pros = dao.findPros(); System.out.println(pros); Gson gson = new Gson(); //将集合转为json 需要导入Gson jar包 String str = gson.toJson(pros); //转换为JSON格式 System.out.println(str); //显示所有json,可以新建一个html 右击Format后方便查找json response.getWriter().print(str); //响应至浏览器 } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
js页面
$(function(){ var $proSelect = $("#province"); //省节点 var $citySelect = $("#city"); //市节点 $.getJSON( "../proCityServlet", //servlet url {}, function(data){ //发送到服务器的数据 //显示所有省份 for(var i=0;i<data.length;i++){ var proName = data[i].province; //循环遍历所有的省节点 //追加省节点 var $proOption = $("<option value="+data[i].provinceId+">"+proName+"</option>"); $proSelect.append($proOption); } //显示对应的城市 $proSelect.change(function(){ //切换省节点时触发事件 //重复切换后删除value 不为空的,避免叠加 $("#city>option[value!=‘‘]").remove(); var proId = $(this).val(); for (var i = 0; i < data.length; i++) { if(data[i].provinceId == proId){ //手动切换到的省节点与查找到的省节点相等 var getCitys = data[i].cities; //获取到对应的城市集合 for(var y=0;y<getCitys.length;y++){ var cname = getCitys[y].cityname; //获取到对应城市名 var $cityOption = $("<option value="+getCitys[y].cityid+">"+cname+"</option>"); //创造新option节点 $citySelect.append($cityOption); //追加option节点 } } } }); } ); });
jsp显示页面
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <!-- 导入jQuery包 --> <script type="text/javascript" src="city.js"></script> <!-- 导入js页面 --> </head> <body> 省份：<select id="province"> <option value="">--请选择省份--</option> </select> 城市：<select id="city"> <option value="">--请选择城市--</option> </select> </body> </html>
标签：lex name text class private 下拉列表 tac catch 市级
原文地址：http://www.cnblogs.com/wxbblogs/p/7141760.html
