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

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

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

<select οnchange="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" οnchange="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