绑定下拉框

绑定下拉框

首先准备一个公共的VO用来存放ID和Name值

/**
 * 绑定下拉框的VO
 * @author 我是灰太狼
 *
 */
public class DropDownBox {
	private Integer ID;
	private String Name;
	
	public Integer getID() {
		return ID;
	}
	public void setID(Integer iD) {
		ID = iD;
	}
	public String getName() {
		return Name;
	}
	public void setName(String name) {
		Name = name;
	}
}

准备好VO后就写一个查询的方法

//绑定下拉框(表名，ID，Name)
	public static List<?> addDropDownBox(String TableName, String ID, String Name) {
		List<DropDownBox> boxs = new ArrayList<DropDownBox>();//准备List集合
		DropDownBox box = null;//声明VO
		StringBuffer sql = new StringBuffer("select * from " + TableName);//拼接SQL语句
		try {
			con = DBUtil.getConnection();//创建连接
			ps = con.prepareStatement(sql.toString());//准备SQL语句
			rs = ps.executeQuery();//执行查询
			while(rs.next()){
				box = new DropDownBox();//实例VO
				box.setID(rs.getInt(ID));//为VO的ID赋值
				box.setName(rs.getString(Name));//为VO的ID赋值
				boxs.add(box);//添加到List集合里面
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}finally{
			DBUtil.close(con, ps, rs);//关闭连接
		}
		return boxs;//返回List集合
	}

写好方法后再写Servlet的调用方法

//绑定下拉框(返回ID和Name)
	public void selectArea(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//请求解决乱码
		request.setCharacterEncoding("utf-8");
		//响应解决乱码
		response.setCharacterEncoding("utf-8");
		String TableName = "D_Area";//设置要获取表名
		String ID = "AreaID";//设置要获取ID
		String Name = "Area";//设置要获取Name
		List<?> list = SelectOptionUtil.addDropDownBox(TableName, ID, Name);//调用查询语句
		PrintWriter out = response.getWriter();
		out.write(ToJsonUtil.toJson(list));//通过流返回给页面
	}

再到JSP页面的调用

appendOption("Area","${ctx}/servlet/SelectOptionServlet?type=selectArea");//绑定下拉框(ID,URL)
    	//为下来框添加选项
		function appendOption(id, url) {
		    $.getJSON(url, function (d) {
		    	var data = d.data;
		        $("#" + id).empty();
		        $("#" + id).append("<option value=" + 0 + ">" + "----请选择----" + "</option>");
		        $.each(data, function (i) {
		            $("#" + id).append("<option value=" + data[i].ID + ">" + data[i].name + "</option>");
		        }); 
		    });
		}

效果截图