Comment filtrer une table en utilisant plusieurs cases select2?

Question

J'essaie de filtrer une table en utilisant la classe des boîtes select2 et multiple.

Tableau 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> 

Sélectionnez 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> 

actuelle 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(); 
     } 
    }); 
}); 

Les JS actuels permettent s filtrage à la table, mais ne gère qu'un seul filtre à la fois. Je me demande comment puis-je faire travailler les sélections ensemble, par exemple avoir le spectacle CSM Events in Austin et tout le reste cacher?

Merci d'avance.

Edit: Voici un violon https://jsfiddle.net/5202jsax/6/

Answer 1

La meilleure façon que je peux penser à obtenir vos sélecteurs de travailler ensemble (sans changer trop de code) est à:

1. Créer deux nouvelles classes CSS: "hidden-course" et "hidden-location"
2. Lorsque vous souhaitez masquer/afficher les lignes de table en fonction de "course", vous ajoutez/supprimez la classe "hidden-course" au lieu d'utiliser .show() /. hide()
3. Lorsque vous souhaitez masquer/afficher les lignes de table en fonction de . N "emplacement", vous ajoutez/retirer le INSTEAD "-emplacement caché" classe d'utilisation .show()/cacher()

Le css pour les nouvelles classes ressemblerait à ceci:

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

Par exemple, si nous négligeons l'activité dans la tête de table (thead) élément, la fonction « cours » deviendrait:

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

S'il vous plaît laissez-moi savoir si cela a été utile. Si cela résout votre problème, veuillez noter que ma réponse a répondu à votre question.