JSP表单select多级联动问题

注意：每次都要定义branch1,branch2,branch3，这样避免变量全局局部的问题

<tr>

         <td>一级部门：</td>

         <td><selectοnchange="getbranch1()" id="branch1"name="branch1_no"></select></td>

         <td>二级部门：</td>

         <td><selectοnchange="getbranch2()" id="branch2"name="branch2_no"></select></td>

         <td>三级部门：</td>

         <td><selectid="branch3" name="branch3_no"></select></td>

</tr>

Branch1，branch2，branch3这三级联动，

方式有两种，一种是ajax一级，一级选择->ajax二级，二级选择->ajax三级，三级选择，这样需要ajax传递三次数据到后台

另一种是，ajax一级，二级，三级数据到jsp，然后js函数控制联动筛选显示，本项目采用的是第二种，速度快，更实用。

（1）ajax拿到所有数据

functionbranchlist(){

         $.ajax({

         type:"POST",

         url:"branchAction.action",

         dataType:"json",

         data:"",

         success: function(json){

         list1 = json.branch1list;

         list2 = json.branch2list;

         var branch1=$("#branch1")[0];

         branch1.options.length=0;

         branch1.options.add(new Option("所有一级部门","0"));

         var branch2=$("#branch2")[0];

         branch2.options.length=0;

         branch2.options.add(new Option("所有二级部门","00"));

         var branch3=$("#branch3")[0];

         branch3.options.length=0;

         branch3.options.add(new Option("所有三级部门","000"));

         for(var i=0;i<list1.length;i++){

         var option= newOption(list1[i].branch,list1[i].branch_no);

         branch1.options.add(option);

         }

         selRefresh("branch1");

         selRefresh("branch2");

         selRefresh("branch3"); }

         })

}

（2）js函数判断联动

functiongetbranch1(){

//根据选择的branch1的值，branch2需要载入的数据联动变化

         var branch1=$("#branch1")[0];

         var branch2=$("#branch2")[0];

         var branch3=$("#branch3")[0];

         document.all.branch2.options.length =1;

         document.all.branch3.options.length =1;

         var firstno=branch1.options[branch1.options.selectedIndex].value;

         if(firstno != "000")

         {

                   for(vari=0;i<list2.length;i++){

                   var funo =(list2[i].branch_no).substring(0,3);

                   if(funo = firstno)

                   {

                            var option= newOption(list2[i].branch,list2[i].branch_no);

                            branch2.options.add(option);

                   }

                   }

         }

         else{

                   document.all.branch2.options.length= 1;

                   document.all.branch3.options.length= 1;

         }

         selRefresh("branch2");

         selRefresh("branch3");

}

 

functiongetbranch2(){

         //根据选择的branch2的值，branch3需要载入的数据联动变化

         var branch2=$("#branch2")[0];

         var branch3=$("#branch3")[0];

         document.all.branch3.options.length =1;

         var secondno= branch2.options[branch2.options.selectedIndex].value;

         if(secondno != "000")

         {

         for(var i=0;i<list3.length;i++){

         var funo =(list3[i].branch_no).substring(0,6);

         if(funo == secondno)

         {

                   var option= newOption(list3[i].branch,list3[i].branch_no);

                   branch3.options.add(option);

         }

         }

         }

         else{

                   document.all.branch3.options.length= 1;

         }

         selRefresh("branch3");

}

 

ajax传递参数的方式：

$.ajax({

         type: "POST",

         url: "<%=path%>/xxxAction.action",

         dataType:"json",

         data:"startIndex="+startIndex+"&endIndex="+endIndex+"&branchno="+branchno+"&flag="+flag,