Java下拉列表联动的实现（从数据库读取数据）

很多时候在界面布局时我们会用到下拉列表，单独的一个列表与数据库的交互很简单，今天要记录的是当有多个下拉列表联动时，该怎样获取数据，即选择第一个下拉列表的值，动态的改变第二个下拉列表乃至更多列表的值。

1、在jsp中定义第一个下拉列表，并且从servlet中获取list列表读取出option的value（此处关于EL表达式以及c标签的使用不在赘述）

<select onchange="getShoppe()" id="bra" name="brand" style="width: 75%;height: 40px; vertical-align: middle; line-height: 40px;">
<option>选择您购买的品牌</option>
<c:forEach var="brandL" items="<%=session.getAttribute("brandlist") %>">
<option value="${brandL.name }" id="${brandL.code }">${brandL.name }</option>

</c:forEach>
</select>2、定义第二个下拉列表（这个下拉列表的option需要依赖第一个下拉列表的改变而改变）
<select name="shop" id="shoppe" onchange="getStaff()" style="width: 75%;height: 40px; vertical-align: middle; line-height: 40px;">
</select>

3、下拉列表的onchange()事件调用该方法（此方法中接收servlet传入的json数据，需导入json包在lib下）

function getShoppe() {//如果第一个下拉列表的值改变则调用此方法

var code = $("#bra option:selected").attr("id");//得到第一个下拉列表的值
if(code!=null && "" != code&& -1 != code){
//通过ajax传入后台，把orderTypeName数据传到后端
$.post("GetShoppeServlet",{code:code},function(data){
var res = $.parseJSON(data);//把后台传回的json数据解析
var option;
option="<option>"+"选择您购买的专柜"+"</option>" ;
$.each(res,function(i,n){//循环，i为下标从0开始，n为集合中对应的第i个对象
option += "<option value='"+n.name+"'>"+n.name+"</option>"
});
$("#shoppe").html(option);//将循环拼接的字符串插入第二个下拉列表
$("#shoppe").show();//把第二个下拉列表展示
});

}else {
$("#shoppe").hide();
}
}

4、新建一个和方法中同名的servlet，根据数据库读出的数据，返回一个json对象
HttpSession session=request.getSession();

int code=Integer.parseInt(request.getParameter("code"));
System.out.println(code);
List<Scanf> shoppelist=scanfDao.getScanfShoppe(code);
session.setAttribute("shoppelist", shoppelist);
List<Scanf> l=(List<Scanf>)session.getAttribute("shoppelist");
//System.out.print(l.get(0).getName());
out.print(JSON.toJSONString(l)); 总的来说，我们要在页面中异步的实现两个甚至多个select的联动，需要在servlet中返回一个json的对象，然后返回给js进行解析后赋值给option