Jquery ajax 实现两级下拉菜单联动

一、概述：

     最近在项目开发中遇到了需要根据银行总行查出其对应的分行，其中一个下拉菜单显示总行，另一个下拉菜单显示分行，如下图所示：

 

    

二、实现步骤：

      声明：因为本人公司用的是自己的框架，很久以前开发的，所以很多处里都是在jsp页面里进行的，大家可以参考一下我的步骤，然后可以在一些开源框架中实现。

 

     1. 假设银行选择下拉菜单所在页面为bankInfo.jsp，在bankInfo.jsp页面中先查出所有银行的总行，然后再将查出的所有银行总行对象循环添加到总行所对应的下拉菜单中。

     2. 在bankInfo.jsp中添加如下的代码：

          <%

 

            CostAccountBO costAccountBo = new CostAccountBO(); 

            List<BankVO> headBanks =costAccountBo.getAllHeadBank();      // headBanks 是包含了所有银行总行对象的List               %>

 

           //以下代码是将查出的List循环添加到select中

            <select name="headBankSelect"id="headBankSelect" onchange="selectSubBank()"> 

                 <option value="">---清选择总行---</option>

                   <%

                      for(BankVO headBank :headBanks){

                   %>                         

                        <option value=<%=headBank.getCode()%><%=headBank.getName()%>

                        </option>

                     <%

                          }

                       %>

            </select>

     3． 添加好总行后的界面如下图所示：

       4． 当选择好总行后会触发selectSubBank方法，在js中添加如下代码：

 

             function selectSubBank(){

                     var headBank = document.getElementById("headBankSelect");

                     if( headBank.value !=""){

                         testAjax(headBank.value);       //testAjax方法中传入的是总行编号

                     }else{

                            Var subBankSelect= document.getElementById("subBranchBankSelect");

                            var subBankSelectLen= subBankSelect.options.length;           

                            for (var i=0;i<subBankSelectLen; i++){

                                   subBankSelect.options[0]= null;

                         }

                            subBankSelect.options[0]= new Option("---清选择分行---","");

                     }

            }

 

           //testAjax方法根据传入的总行编号,用jquery的ajax将总行编号传到处理页面SubBankSearch.jsp页面中(下面会有                            //SubbankSearch页面汇总的具体处理)

 

           functiontestAjax(headBankId){

                            $.ajax({

                               'url':'SubBankSearch.jsp',        

                               'data':{headBankId:headBankId},  

                               'type':'GET',              

                               'dataType':'json',           

                               'success':function (data){  

                                        //data数据是由处理页面根据总行编号查出的分行的数据信息

                                        var subBankSelect =document.getElementById("subBranchBankSelect");

                                        var subBankSelectLen =subBankSelect.options.length;

                                        //下面这个循环是将分行的下拉菜单清空

                                        for (var i=0;i<subBankSelectLen; i++){

                                                     subBankSelect.options[0] = null;

                                        }  

                                        var start = 0;   

                                       subBankSelect.options[start] = new Option("---清选择分行---","");

                                        //上面这行代码是在清空后的下拉菜单中添加一行默认的数据

                                        start++;     

                                       //下面循环是将返回的分行信息添加到分行下拉菜单中

                                       $.each(data,function(entryIndex,entry){                     

                                             subBankSelect.options[start] =new Option(entry,entryIndex);             

                                             start++;

                                        });

                               },

                               'error':function (){     

                                         alert("error");

                                }

                             }

                         );

          }

      5． Ajax处理页面SubBankSearch.jsp中的代码如下所示：

 

     <%

              String headBankId = StringUtil.format(request.getParameter("headBankId"));  //获取请求的总行编号

              CostAccountBO costAccountBo = new CostAccountBO();

              String subBankJson = costAccountBo.getSubBankToJson(headBankId);

                                                      //getSubBankToJson方法就是将查出的分行数据转换成json数据

              PrintWriter outValue = response.getWriter();

              out.println(subBankJson);

     %>

          

     6． getSubBankToJson方法中的代码

 

           public String getSubBankToJson(StringheadBankId){

                      List<BankVO> banks = null;

                      banks = getSubBankByHeadBankId(headBankId);  //这个方法就是根据总行编号查出所对应的分行信息                         Map<String,String> mapJson = new HashMap<String,String>();

 

                      for(BankVO subBank : banks){

 

                        mapJson.put(subBank.getCode(),subBank.getName());

                     }

                     JSONObject jsonObj = JSONObject.fromObject(mapJson);

                     returnjsonObj.toString();

         }

 

 7． 最后的页面如下图所示：

 

 三、总结：

 

       这里只是做了一个固定的两级菜单的联动，方法有很多种，上面的方法只是本人比较喜欢用的一种，大家还可以举一反三，可以做出N级        菜单联动(以后有时间的话，会给大家写个N级菜单联动的例子)。