如何使用多個select2框篩選表格？

Question

我想過濾使用類和多個select2框的表。

表HTML

<table class="table"> 
    <tbody> 
     <tr class="kanban-event Austin"> 
      <td>...</td> 
     </tr> 
     <tr class="csm-event Charlotte"> 
      <td>...</td> 
     </tr> 
     <tr class="cal-event Charlotte"> 
      <td>...</td> 
     </tr> 
     <tr class="cspo-event Austin"> 
      <td>...</td> 
     </tr> 
     <tr class="cal-event Raleigh"> 
      <td>...</td> 
     </tr> 
     <tr class="kanban Charlotte"> 
      <td>...</td> 
     </tr> 
     <tr class="cspo-event Austin"> 
      <td>...</td> 
     </tr> 
     <tr class="csm-event Charlotte"> 
      <td>...</td> 
     </tr> 
     <tr class="safe-event Austin"> 
      <td>...</td> 
     </tr> 
     <tr class="cspo-event Raleigh"> 
      <td>...</td> 
     </tr> 
     <tr class="csm-event Charlotte"> 
      <td>...</td> 
     </tr> 
     <tr class="csm-event Raleigh"> 
      <td>...</td> 
     </tr> 
    </tbody> 
</table> 

選擇HTML

<select id="location"> 
    <option value="all">All Locations ...</option> 
    <option value="Austin">Austin, TX</option> 
    <option value="Charlotte">Charlotte, NC</option> 
    <option value="Raleigh">Raleigh, NC</option> 
</select> 

<select id="course"> 
    <option value="all">All Courses ...</option> 
    <option value="csm">Certified Scrum Master (CSM)</option> 
    <option value="cspo">Certified Scrum Product Owner (CSPO)</option> 
    <option value="cal">Certified Agile Leadership (CAL)</option> 
    <option value="safe">Scaled Agile Framework (SAFe&reg;)</option> 
    <option value="kanban">Kanban</option> 
</select> 

當前JS

jQuery(function() { 

    jQuery("#course").on("select2-selecting", function (evt) { 
     // console.log(evt.val); 
     // console.log(jQuery('#events-table tr:not(".'+evt.val+'-event")')); 
     jQuery('#events-table tr').show(); 
     jQuery('#events-table thead tr').show(); 
     jQuery('#events-table tr:not(".'+evt.val+'-event")').hide(); 
     jQuery('#events-table thead tr').show(); 
     if (evt.val == '') { 
     jQuery('#events-table tr').show(); 
     jQuery('#events-table thead tr').show(); 
     } 
    }); 

    jQuery("#location").on("select2-selecting", function (evt) { 
     // console.log(evt.val); 
     // console.log(jQuery('#events-table tr:not(".'+evt.val+'")')); 
     jQuery('#events-table tr').show(); 
     jQuery('#events-table thead tr').show(); 
     jQuery('#events-table tr:not(".'+evt.val+'")').hide(); 
     jQuery('#events-table thead tr').show(); 
     if (evt.val == '') { 
     jQuery('#events-table tr').show(); 
     jQuery('#events-table thead tr').show(); 
     } 
    }); 
}); 

當前JS允​​許s過濾到表，但一次只能處理一個過濾器。我想知道如何讓選擇一起工作，例如在奧斯汀舉行的CSM活動以及其他一切隱藏？

在此先感謝。

編輯：這是一個小提琴https://jsfiddle.net/5202jsax/6/

Answer 1

我能想到讓你選擇一起工作（不改變太多的代碼）的最好辦法是：

1. 創建兩個新的CSS類： 「隱藏課程」和「隱藏位置」
2. 當您想基於「course」隱藏/顯示錶格行時，可以使用.show（）/。添加/刪除「hidden-course」類INSTEAD。hide （）
3. 當你想隱藏/顯示基於表的行o 。N 「位置」，您可以添加/刪除，而不是使用.show（）的 「隱藏位置」 級/隱藏（）

新類的CSS是這樣的：

.hidden-course, 
.hidden-location { 
    display: none; 
} 

例如，如果我們忽略了在表頭（THEAD）元素的活動中，「課程」功能將成爲：

jQuery("#course").on("select2-selecting", function (evt) { 
    jQuery('#events-table tr.hidden-course').removeClass('hidden-course'); 
    jQuery('#events-table tr:not(".'+evt.val+'-event")').addClass('hidden-course'); 
    if (evt.val == '') { 
    jQuery('#events-table tr').removeClass('hidden-course'); 
    } 
}); 

請讓我知道，如果這是有幫助的。如果這能成功解決您的問題，請標記我的答案「回答」了您的問題。