级联下拉列表 ajax实现(两种方式)

案例:设置一个级联下拉列表,省市区,根据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>

以上两种方式都可以很好的实现级联下拉列表的功能,作为自己的学习记录,同时欢迎大家指出错误和可以更好改进的地方,大家一起共同进步~




猜你喜欢

转载自blog.csdn.net/qq_39147516/article/details/79162952