案例:设置一个级联下拉列表,省市区,根据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>
以上两种方式都可以很好的实现级联下拉列表的功能,作为自己的学习记录,同时欢迎大家指出错误和可以更好改进的地方,大家一起共同进步~