自舉摺疊面板上的過濾器

Question

我有一個包含自舉摺疊面板列表的頁面。我首先查詢內容數據庫中動態創建這些面板，請參閱下面的代碼：

<div class="panel-group" id="accordion"> 

<?php 

     $all_emails = "SELECT * FROM sent_emails"; 

     if($result = mysqli_query($link, $all_emails)) { 
      while($rows = $result->fetch_object()) { 
       $db = $rows->timestamp; 
       $timestamp = strtotime($db); 

       echo ' 
        <div class="panel panel-default m'.date("m", $timestamp).'"> 
         <div class="panel-heading"> 
          <h4 class="panel-title"> 
           <a data-toggle="collapse" data-parent="#accordion" href="#collapse'.$rows->ai.'"> 
            #'.$rows->ai.' | Sent to: '.$rows->mail_to.' | Subject: '.$rows->mail_subject.' <span class="pull-right">| '.$rows->timestamp.' </span> 
           </a> 
          </h4> 
         </div> 
         <div id="collapse'.$rows->ai.'" class="panel-collapse collapse"> 
          <div class="panel-body"> 
           '.$rows->mail_message.' 
          </div> 
         </div> 
        </div> 
       '; 

      } 

      mysqli_free_result($result); 
     } 

?> 

</div> 

這工作得很好，所有，但我接下來要做到的是增加一個過濾器，只顯示面板具有一定的上課。正如你在上面的代碼中看到的，我使用類「panel panel-default m（'month'）創建了div，它們都有一個名爲」panel-group「的父級div。

WHen我從下拉列表中選擇一個月按鈕，如下圖所示，我拿一個月的價值/ ID爲jQuery的作爲濾波器輸入。

<div class="dropdown1"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 
     Select month 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" id="select1"> 
     <li value="january" id="m1" role="presentation"><a href="#">January</a></li> 
     <li value="february" id="m2" role="presentation"><a href="#">February</a></li> 
     <li value="march" id="m3" role="presentation"><a href="#">March</a></li> 
     <li value="april" id="m4" role="presentation"><a href="#">April</a></li> 
     <li value="may" id="m5" role="presentation"><a href="#">May</a></li> 
     <li value="june" id="m6" role="presentation"><a href="#">June</a></li> 
     <li value="july" id="m7" role="presentation"><a href="#">July</a></li> 
     <li value="august" id="m8" role="presentation"><a href="#">August</a></li> 
     <li value="september" id="m9" role="presentation"><a href="#">September</a></li> 
     <li value="october" id="m10" role="presentation"><a href="#">October</a></li> 
     <li value="november" id="m11" role="presentation"><a href="#">November</a></li> 
     <li value="december" id="m12" role="presentation"><a href="#">December</a></li> 
    </ul> 
</div><!--/.dropdown1 --> 

到目前爲止，我有以下的jQuery代碼。那並不是「面板組」的每一個孩子的div我們可以說m10（=十月）必須隱藏。

<script> 
$(function(){ 
    $("#select1").on('click', 'li', function(){ 
     $("#dropdownMenu1").text($(this).text()); 
     $("#dropdownMenu1").val($(this).text());  

     $(".panel-group").show(); 

     $(".panel-group .panel.panel-default :not(."+this.id+")").hide(); 

    }); 
}); 

我一直在嘗試很多，已搜查所有在互聯網上的滿足我需要的答案，但至今沒有運氣:(

Answer 1

全部隱藏，然後顯示正確的：

$(function(){ 
    $("#select1").on('click', 'li', function(){ 
     $("#dropdownMenu1").text($(this).text()); 
     $("#dropdownMenu1").val($(this).text());  

     $(".panel-group .panel").hide(); 

     $(".panel-group .panel.panel-default."+this.id).show(); 

    }); 
});