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頁面匯總的具體處理)

 

           function
testAjax(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(String
headBankId){

                      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);

                     return
jsonObj.toString();

         }

 

 7． 最後的頁面如所示：

 

 三、總結：

 

       這裡只是做了一個固定的兩級菜單的聯動，方法有很多種，上面的方法只是本人比較喜歡用的一種，大家還可以舉一反三，可以做出N級        菜單聯動(以後有時間的話，會給大家寫個N級菜單聯動的例子)。