案例:设置一个级联下拉列表,省市区,根据id进行查找,同属于同一个省的城市前两位id相同,属于同一个市的区前4位id相同
数据库数据如下(部分):
第一种方式:通过获取json对象,然后进行解析json对象数组,动态创建下拉列表
1:Dao代码如下:
package com.oracle.dao; import java.util.List; import com.oracle.jdbc.util.Dao; import com.oracle.vo.City; public class CityDaoImpl implements CityDao { //第一种方式的方法,通过id+两位占位符获取 对象,id可以为空 @Override public List<City> getCity(String id) { String sql="select id,name from city where id like'"+id+"__'"; return Dao.query(sql,City.class); } //第二种方式的方法,获取对象存到list,循环取出 连接成html代码形式的字符串 @Override public String getCities(String id) { StringBuffer sb=new StringBuffer(); List<City>list=Dao.query("select id,name from city where id like'"+id+"__'",City.class); for(City l:list){ sb.append("<option value='"+l.getId()+"'>"+l.getName()+"</option>"); } return sb.toString(); } }2:在servlet中获取城市的id,返回该id下属的市或者区,servlet代码如下,调用dao中方法:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取id值 String code=request.getParameter("code"); //设置编码 request.setCharacterEncoding("utf-8"); response.setContentType("text/plain;charset=utf-8"); //利用工厂创建dao对象,并调用dao方法 CityDao dao=ServiceFactory.getObject(CityDaoImpl.class); List<City>list=dao.getCity(code); //通过jackson包的方法,将list对象转成jason对象,传回jsp中 ObjectMapper mapper=new ObjectMapper(); String json=mapper.writeValueAsString(list); response.getWriter().append(json); }3.在jsp文件中编写ajax代码,实现传id返数据,代码如下
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="js/jquery-1.11.1.js"></script> <script> $(function(){ //初始入口函数 //初始传入空字符串,自动查出id为两位的数据,都为省或直辖市 $.post("city.do",{code:""},function(data){ //循环插入在select中 for(var i=0;i<data.length;i++){ $("#province").append($("<option>").val(data[i].id).html(data[i].name)); } $("#province").change(); },"json") //设置省change函数 $("#province").change(function(){ $.post("city.do",{code:$(this).val()},function(data){ $("#city").empty();//置空 for(var i=0;i<data.length;i++){ $("#city").append($("<option>").val(data[i].id).html(data[i].name)); } $("#city").change(); },"json") }); //设置市change函数 $("#city").change(function(){ $.post("city.do",{code:$(this).val()},function(data){ $("#area").empty();//置空 for(var i=0;i<data.length;i++){ $("#area").append($("<option>").val(data[i].id).html(data[i].name)); } },"json") }); }); </script> </head> <body> <select style="width:150px" id="province"></select>省 <select style="width:150px" id="city"></select>市 <select style="width:150px" id="area"></select>区 </body> </html>
第二种方式,通过Dao里的第二个方法,返回html代码形式的 list对象,直接设置在select的html中,可自动生成下拉菜单,级联更新子列表操作同上,不做过多解释
1:servlet,代码如下:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //取id String id=request.getParameter("code"); //置编码 request.setCharacterEncoding("utf-8"); response.setContentType("text/plain;charset=utf-8"); //调用dao对象的第二个方法,返回htm代码字符串 CityDao dao=ServiceFactory.getObject(CityDaoImpl.class); String str=dao.getCities(id); response.getWriter().append(str); }
2:jsp代码如下(只有script部分,其他部分同第一个方法相同):
<script> $(function(){ $.post("city2.do",{code:""},function(data){ $("#province").html(data); $("#province").change(); }) $("#province").change(function(data){ $.post("city2.do",{code:$(this).val()},function(data){ $("#city").html(data); }) $("#city").change(); }); $("#city").change(function(data){ $.post("city2.do",{code:$(this).val()},function(data){ $("#area").html(data); }) }); }); </script>
以上两种方式都可以很好的实现级联下拉列表的功能,作为自己的学习记录,同时欢迎大家指出错误和可以更好改进的地方,大家一起共同进步~