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

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

 

 

选择您购买的品牌">${brandL.name }

 

2、定义第二个下拉列表（这个下拉列表的option需要依赖第一个下拉列表的改变而改变）

 

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=""+"选择您购买的专柜"+"" ;                     $.each(res,function(i,n){
   //循环，i为下标从0开始，n为集合中对应的第i个对象                          option += ""+n.name+""                      });                      $("#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
     
       shoppelist=scanfDao.getScanfShoppe(code);        session.setAttribute("shoppelist", shoppelist);        List
      
        l=(List
       
        )session.getAttribute("shoppelist");        //System.out.print(l.get(0).getName());        out.print(JSON.toJSONString(l));
       
      
     

总的来说，我们要在页面中异步的实现两个甚至多个select的联动，需要在servlet中返回一个json的对象，然后返回给js进行解析后赋值给option