Jquery 實現select 3級級聯查詢

 

 實現級聯效果的思路：

1、 頁面加載時，先顯示第一級select，第二、三級的select隱藏，根據第一級select值的改變，再顯示第二級select，依次類推；

2、只從后台獲取第一級select的數據，第二級select的選項數據根據第一級select值的改變再動態更新，第三級select的選項數據再根據第二級select值的改變再做動態更新；

 

一、基於Jquery的jsp實現步驟：

1、頁面引入Jquery插件：

 <script src="${pageContext.request.contextPath}/resources/js/jquery-3.0.0.min.js"></script>

 

2、頁面加入三級的select標簽：

 <!-- 一級select -->  
           <div >         
              <select   id="select-first"  name="categoryId"  data-getDataUrl="${pageContext.request.contextPath}/admin/spu/spu/getsonCategory">
                  <option value=''>請選擇分類</option>
                  <c:forEach items="${rootCategorys}" var="rootCategory" varStatus="statu">
                    <option value="${rootCategory.id}" ${params.firstValue ==rootCategory.id  ? 'selected="selected"' :''}  >${rootCategory.categoryName}</option>
                  </c:forEach>                 
              </select>
           </div>
           <!-- 二級select -->
           <div  id="box-select-second" style="display:none;" >         
              <select   id="select-second" name="sonCategoryId"  data-getDataUrl="${pageContext.request.contextPath}/admin/spu/spu/getsonCategory" >                                         
             
              </select>
           </div>
            <!-- 三級select -->
           <div  id="box-select-third" style="display:none;" >         
              <select    id="select-third"  name="grandsoncategoryId"  data-getDataUrl="${pageContext.request.contextPath}/admin/spu/spu/getsonCategory" >  
                              
              </select>
           </div>                
           

3、使用jquery的change()方法,可以監聽select的值一旦發生改變，就觸發事件；

     使用$.ajax()異步方法請求后台數據，成功返回數據添加到下級select選項中：

              //級聯select:一級select的值發生改變，觸發二級的選項改變
              $("#select-first").change(function(){
                  //清空二級和三級select的舊選項
                  $("#select-second").empty();
                  $("#select-third").empty();
                  //請求二級select選項數據地址
                  var targetUrl = $(this).attr("data-getDataUrl");
                  //獲得一級select的值
                  var firstValue = $(this).val();                  
                  //如果一級select的值為null，隱藏二、三級select,並返回
                  if(firstValue == ''){
                      $("#select-second").fadeOut("slow");
                      $("#select-third").fadeOut("slow");
                      return;
                  }            
                 
                 //根據一級select的值，異步獲取數據更新二級的選項             
                  $.ajax({    
                      type:'get',        
                      url:targetUrl,    
                      data:{
                          parentId:firstValue
                      },    
                      cache:false,    
                      dataType:'json',    
                      success:function(secondDatas){                              
                          
                          //遍歷回傳的數據添加到二級select
                            $.each(secondDatas, function(key, secondData) {
                               
                                   var option = '<option value="'+secondData.id+'">'+secondData.categoryName+'</option>'      
                                   $("#select-second").append(option)
                                   
                            })                            
                            
                            //二級select展示
                           $("#box-select-second").fadeIn("slow");
                            //三級select隱藏
                              $("#box-select-third").fadeOut("slow");                                                 
                      },
                      error:function(){ 
                          alert("請求失敗")
                        }
                   });                  
              });
              
              //級聯select:二級select值改變，觸發三級select變化
              $("#select-second").change(function(){
                  //清空三級slect的舊選項                
                  $("#select-third").empty();
                  //請求二級select選項數據地址
                  var targetUrl = $(this).attr("data-getDataUrl");
                  //二級select的值
                  var secondValue = $(this).val();
                  //如果一級select的值為null，隱藏三級select,並返回
                  if(secondValue == ''){                    
                      $("#select-third").fadeOut("slow");
                      return;
                  } 
                  //根據二級select的值，異步獲取數據更新三級的選項    
                  $.ajax({    
                      type:'get',        
                      url:targetUrl,    
                      data:{
                          parentId:secondValue
                      },    
                      cache:false,    
                      dataType:'json',    
                      success:function(thirdDatas){                              
                          
                          //遍歷回傳的數據添加到三級select
                            $.each(thirdDatas, function(key, thirdData) {
                               
                                   var option = '<option value="'+thirdData.id+'">'+thirdData.categoryName+'</option>'      
                                   $("#select-third").append(option)
                                   
                            })
                            
                             //三級select顯示出來
                              $("#box-select-third").fadeIn("slow");                                                 
                      },
                      error:function(){ 
                          alert("請求失敗")
                        }
                   });                  
              });

 

4、后台是使用spring-mvc框架，前端ajax異步請求下級select數據在后台的相關實現是：

 

    /**
     * 獲得子分類
     * @param parentId
     * @return
     */
    @RequestMapping(value="getsonCategory",method =RequestMethod.GET) @ResponseBody public List<TShopCategory> getsonCategory(Long parentId) { List<TShopCategory> sonCategorys =categoryService.getChildrenCategorys(parentId); return sonCategorys; }

 

 ajax發送select的值和請求地址到后台，后台響應成功后回傳子分類的集合給前端，

 

 前端以json格式獲得，前端使用Jquery的$.each遍歷分類集合，生成<option>標簽，使用append()方法將新生成的<option>標簽添加到下級的select當中。

 

 

下圖為實現效果圖：

 

這是只基於Jquery的 三級select級聯查詢，沒有任何美化和增強功能，下面介紹基於bootstrap框架+bootstrap-select組件的三級select級聯查詢功能，

美化select選擇框和增加選項搜索。

 

二、基於Jquery、bootstrap框架、bootstrap-select組件，實現三級查詢步驟：

 1、在jsp引入相關文件（bootstrap-select組件依賴於bootstrap框架，bootstrap框架依賴於Jquery）：

<!-- 引入 Bootstrap 樣式-->
      <link href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">        
      <!-- select樣式 -->
      <link href="${pageContext.request.contextPath}/resources/css/select/bootstrap-select.min.css" rel="stylesheet">
        
           
      <!-- jQuery (Bootstrap 需要引入 jQuery) -->
      <script src="${pageContext.request.contextPath}/resources/js/jquery-3.0.0.min.js"></script>
      <!-- bootstrap插件 -->
      <script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script>         
      <!-- bootstrap-select組件 -->
      <script src="${pageContext.request.contextPath}/resources/js/select/bootstrap-select.min.js"></script>
      <script src="${pageContext.request.contextPath}/resources/js/select/defaults-zh_CN.min.js"></script>

2、jsp加入3級的select：

 <!--搜索欄-->
       <form id="listForm" class="row" action=""  method = "GET">                          
         <div class="col-md-12 ">      
           <div class="form-group col-md-2 " id="spu-select-firstCategory">
              <!-- 一級select -->         
              <select  class="form-control selectpicker show-tick reset" id="select-first" title="請選擇分類" name="firstValue"  data-getDataUrl="${pageContext.request.contextPath}/admin/spu/spu/getsonCategory" data-live-search="true"  data-size="6">
                  <c:forEach items="${rootCategorys}" var="rootCategory" varStatus="statu">
                    <option value="${rootCategory.id}" ${params.firstValue ==rootCategory.id  ? 'selected="selected"' :''}  >${rootCategory.categoryName}</option>
                  </c:forEach>                 
              </select>
           </div>
           <!-- 二級select -->    
           <div class="form-group col-md-2  " id="box-select-second" style="display:none;" >         
              <select   class="form-control selectpicker show-tick reset" id="select-second" title="二級分類" name="sonCategoryId"  data-getDataUrl="${pageContext.request.contextPath}/admin/spu/spu/getsonCategory" data-live-search="true"  data-size="6">
                                         
              </select>
           </div>
           <!-- 三級select -->    
           <div class="form-group col-md-2 " id="box-select-third" style="display:none;" >         
              <select   class="form-control selectpicker show-tick reset" id="select-third" title="三級分類" name="categoryId"  data-getDataUrl="${pageContext.request.contextPath}/admin/spu/spu/getsonCategory" data-live-search="true"  data-size="6">  
                              
              </select>
           </div>
           <div class="form-group form-inline col-md-2 ">     
              <input id="formSearch" type="button" class="form-control" value="搜索" >        
           </div>                          
          </div>                       
       </form>

3、Jquery實現級聯效果，注意：因為引入了bootstrap-select組件，異步ajax獲得回傳的數據添加到select時，需要調用selectpicker('refresh')方法刷新才看得見新的option選項：

<script type="text/javascript">
          $().ready(function(){
                     
              //級聯select:首級select的值發生改變，觸發二級的選項改變
              $("#select-first").change(function(){
                  //清空二級和三級select的舊選項
                  $("#select-second").empty();
                  $("#select-third").empty();
                  //請求二級select選項數據地址
                  var targetUrl = $(this).attr("data-getDataUrl");
   
                  //一級select的值
                  var firstValue = $(this).val();  
                  
                  //如果一級select的值為null，隱藏二、三級select,並返回
                  if(firstValue == ''){
                      $("#select-second").fadeOut("slow");
                      $("#select-third").fadeOut("slow");
                      return;
                  }            
                 
                 //根據一級的值改變，異步獲取數據更新二級的選項             
                  $.ajax({    
                      type:'get',        
                      url:targetUrl,    
                      data:{
                          parentId:firstValue
                      },    
                      cache:false,    
                      dataType:'json',    
                      success:function(secondDatas){                              
                          
                          //遍歷回傳的數據添加到二級select
                            $.each(secondDatas, function(key, secondData) {
                               
                                   var option = '<option value="'+secondData.id+'">'+secondData.categoryName+'</option>'      
                                   $("#select-second").append(option)
                                   
                            })
                             //bootstap-select控件:需刷新對應select                           
                              $("#select-second").selectpicker('refresh');
                            
                            //二級select展示
                           $("#box-select-second").fadeIn("slow");
                            //三級select隱藏
                              $("#box-select-third").fadeOut("slow");                                                 
                      },
                      error:function(){ 
                          bootbox.alert("請求失敗")
                        }
                   });                  
              });
              
              //級聯select:二級select值改變，觸發三級select變化
              $("#select-second").change(function(){
                  //清空三級slect的舊選項                
                  $("#select-third").empty();
                  //請求二級select選項數據地址
                  var targetUrl = $(this).attr("data-getDataUrl");
                  //二級select的值
                  var secondValue = $(this).val();
                  //如果一級select的值為null，隱藏三級select,並返回
                  if(secondValue == ''){                    
                      $("#select-third").fadeOut("slow");
                      return;
                  } 
                  //根據二級的值改變，異步獲取數據更新三級的選項    
                  $.ajax({    
                      type:'get',        
                      url:targetUrl,    
                      data:{
                          parentId:secondValue
                      },    
                      cache:false,    
                      dataType:'json',    
                      success:function(thirdDatas){                              
                          
                          //遍歷回傳的數據添加到三級select
                            $.each(thirdDatas, function(key, thirdData) {
                               
                                   var option = '<option value="'+thirdData.id+'">'+thirdData.categoryName+'</option>'      
                                   $("#select-third").append(option)
                                   
                            })
                            //bootstap-select控件:需刷新對應select                           
                              $("#select-third").selectpicker('refresh');
                            
                             //三級select顯示出來
                              $("#box-select-third").fadeIn("slow");                                                 
                      },
                      error:function(){ 
                          alert("請求失敗")
                        }
                   });                  
              });            
                 
          });
                                 
</script>

 

4、后台是使用spring-mvc框架，前端ajax異步請求下級select數據在后台的相關實現是：

    /**
     * 獲得子分類
     * @param parentId
     * @return
     */
    @RequestMapping(value="getsonCategory",method =RequestMethod.GET)
    @ResponseBody
    public List<TShopCategory> getsonCategory(Long parentId) {
        
        List<TShopCategory> sonCategorys =categoryService.getChildrenCategorys(parentId);
        
        return sonCategorys;        
    }

 ajax發送select的值和請求地址到后台，后台響應成功后回傳子分類的集合給前端，

 前端以json格式獲得，前端使用Jquery的$.each遍歷分類集合，生成<option>標簽，使用append()方法將新生成的<option>標簽添加到下級的select當中。

 

 

圖為整合了bootstrap框架+bootstrap-select組件實現的三級select效果：