学步园

上网找了下资料，参考着做了个

JSP页面，使用JSTL的标签。

<tr>
	<td width="10%">所属栏目</td>
	<td width="90%"><select name="columnInfo" id="columnInfo">
		<option value="0">--请选择--</option>
		<c:forEach var="columns" items="${columnsList}">
			<option value="${columns.id}">${columns.name}</option>
		</c:forEach>
	</select><select name="subColumnInfo" id="subColumnInfo"></select></td>
</tr>

JS

$(function(){          
	$("#columnInfo").change(function(){              
		$.getJSON("NewsAction!ajax",{parColumnId:$(this).val()},function(myJSON){                  
			var myOptions="";                  
			for(var i=0;i<myJSON.length;i++){                     
				 myOptions += '<option value="' + myJSON[i].optionValue + '">' +
					myJSON[i].optionDisplay + '</option>';                  
                 }                 
             $("#subColumnInfo").empty();                  
             $("#subColumnInfo").html(myOptions);              
       	});          
   	});          
   	$("#columnInfo").change();      
}) 

后台处理

// 处理AJAX级联请求
	public void ajax() throws Exception {
		String JSON_text = "";
		if (parColumnId == 0) {
			JSON_text = "[{optionValue:'0',optionDisplay:'--请选择--'}]";
		} else {
			List<Columns> subColumnList = columnService
					.findColumns(parColumnId);
			if (subColumnList.size() > 0) {
				JSON_text = "[";
				for (int i = 0; i < subColumnList.size(); i++) {
					Columns sub = subColumnList.get(i);
					JSON_text += "{optionValue:'" + sub.getId()
							+ "',optionDisplay:'" + sub.getName() + "'}";
					if (i < subColumnList.size() - 1) {
						JSON_text += ", ";
					} else if (i == subColumnList.size() - 1) {
						JSON_text += "]";
					}
				}
			}
		}
		PrintWriter out = null;
		try {
			ServletActionContext.getResponse().setCharacterEncoding("UTF-8");
			out = ServletActionContext.getResponse().getWriter();
		} catch (IOException ex) {
			ex.printStackTrace();
		}
		out.write(JSON_text);
		out.close();
	}