无数据库级联下拉列表

JQuery的AJAX一直不太清楚，借个机会，做了个小demo，记录：

 

页面显示：area.jsp

 

<div id="area">
	 <select id="area_first" onchange="ajax()">
	 	<option value=-1>--请选择--</option>
	 	<option value="1">北京</option>
	 	<option value="2">黑龙江</option>
	 </select>
	 <select id="area_second">
	 	<option value="-1">--请选择--</option>
	 </select>
 </div>

 

页面上的JS：

 

function ajax(){
		var firstValue = $("#area_first").children('option:selected').val();
		if(firstValue != -1){
			$.post("AreaServlet",{"firstValue":firstValue},function(data,textStauts){
				var html ="<option value='-1'>---请选择---</option>";
				var _json = eval(data);
				var json = _json[0];
				for(var i = 0; i < json.area.length; i++){
					alert(json.area[i].area_id);
					html += "<option id="+json.area[i].area_id+">"+json.area[i].area_name+"</option>";
				}
				$("#area_second").empty();
				$("#area_second").html(html);
			});
		}
	}

 

控制层的Servlet:AreaServlet.java

 

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String firstValue = request.getParameter("firstValue");
		System.out.println(firstValue);
		if("2".equals(firstValue)){
			ArrayList<Area> objectTypes = new ArrayList<Area>();
			objectTypes.add(new Area("1", "大庆"));
			objectTypes.add(new Area("2", "哈尔滨"));
			objectTypes.add(new Area("3", "佳木斯"));
			
			JSONObject jsonObject = new JSONObject();
	        jsonObject.put("area", objectTypes);
	        
	        JSONArray jsonArray = new JSONArray();
	        jsonArray.add(jsonObject);
			System.out.println(jsonArray);
			response.setCharacterEncoding("UTF-8");
			PrintWriter out = response.getWriter();
			out.write(jsonArray.toString());
		}
	}

 

Area.java

 

package com.zsy.action;

public class Area {
	
	private String area_id;
	private String area_name;
	
	public String getArea_id() {
		return area_id;
	}
	public void setArea_id(String area_id) {
		this.area_id = area_id;
	}
	public String getArea_name() {
		return area_name;
	}
	public void setArea_name(String area_name) {
		this.area_name = area_name;
	}
	public Area(String area_id, String area_name) {
		super();
		this.area_id = area_id;
		this.area_name = area_name;
	}
	
	
}