import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ChainSelect extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json; charset=utf-8");
String jsonStr = this.getStr(request.getParameter("keyword"), request.getParameter("type"));
PrintWriter out = null;
try {
out = response.getWriter();
out.write(jsonStr);
} catch (IOException e) {
e.printStackTrace();
} finally {
if (out != null) {
out.close();
}
}
}
private String getStr(String keyword, String type) {
String jsonStr = "";
if("top".equals(type)) {
if("BMW".equals(keyword)) {
jsonStr = "["316ti", "6ercupe"]";
} else if("Audi".equals(keyword)) {
jsonStr = "["tt"]";
} else if("VW".equals(keyword)) {
jsonStr = "["Golf4"]";
}
} else if("sub".equals(type)) {
if("tt".equals(keyword)) {
jsonStr = "["rha", "rhb", "rhc"]";
} else if("316ti".equals(keyword)) {
jsonStr = "["rha", "rhb"]";
} else if("6ercupe".equals(keyword)) {
jsonStr = "["rha", "rhb", "rhc"]";
} else if("Golf4".equals(keyword)) {
jsonStr = "["rha", "rhb"]";
}
}
return jsonStr;
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
代码清单1.7与清单1.6的区别是，后者多了getStr()的方法，该方法用于判断前端传递过来的是一级(top)下拉框的值，还是二级(sub)下拉框的值，并根据传递的keyword返回需要的字符串。与本后台交互的是程序清单1.8所示的代码。
程序清单1.8:chainSelect.js
/**
* 级联下拉框效果
*/$(document).ready(function(){
//找到三个下拉框
var carnameSelect = $(".carname").children("select");
var cartypeSelect = $(".cartype").children("select");
var wheeltypeSelect = $(".wheeltype").children("select");
carnameSelect.change(function(){
var carname = carnameSelect.val();
if(carname != "") {
//汽车厂商不为空发起ajax请求
$.post("../chainSelect", {keyword: carname, type : "top"}, function(data){
if(data != null && data.length != 0) {
//清除上一次change的内容
cartypeSelect.html("");
$("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);
for(var i = 0; i < data.length; i++) {
$("<option value='"+data[i]+"'>"+data[i]+"</option>").appendTo(cartypeSelect);
}
$(".cartype").show();
