Jquery 實現select 3級級聯查詢

時間 2019-11-21

原文原文鏈接

實現級聯效果的思路：javascript

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

二、只從後臺獲取第一級select的數據，第二級select的選項數據根據第一級select值的改變再動態更新，第三級select的選項數據再根據第二級select值的改變再作動態更新；前端

1、基於Jquery的jsp實現步驟：java

一、頁面引入Jquery插件：jquery

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

二、頁面加入三級的select標籤：ajax

 <!-- 一級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>

三、使用jquery的change()方法,能夠監聽select的值一旦發生改變，就觸發事件；spring

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

              //級聯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，隱藏2、三級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("請求失敗")
                        }
                   });                  
              });

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

    /**
     * 得到子分類
     * @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的值和請求地址到後臺，後臺響應成功後回傳子分類的集合給前端，spring-mvc

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

下圖爲實現效果圖：

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

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

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

一、在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>

二、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>

三、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，隱藏2、三級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>

四、後臺是使用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效果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。