Javascript 如何使用多个select2框筛选表？

我正在尝试使用类和多个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>

<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允许对表进行筛选，但一次只处理一个筛选器。我想知道我如何才能使选择工作在一起，例如有CSM活动在奥斯汀显示和其他一切隐藏

提前谢谢

---

编辑：这里有一把小提琴

我能想到的让你的选择器协同工作的最好方法（不改变太多代码）是：

创建两个新的css类：“隐藏课程”和“隐藏位置”

如果要基于“课程”隐藏/显示表行，可以添加/删除“隐藏课程”类，而不是使用.show（）/.hide（）

如果要基于“位置”隐藏/显示表行，可以添加/删除“隐藏位置”类，而不是使用.show（）/.hide（）

新类的css如下所示：

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

例如，如果我们忽略table head（thead）元素中的活动，“course”函数将变成：

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

---

请让我知道这是否有用。如果这成功地解决了您的问题，请标记我的答案“回答”了您的问题。

请添加jsfiddle，这将很好。@PandhiBhaumik-Fiddle添加了hanks，Anthony，但这仅适用于第一个选择，一旦您选择了一个选项多次，表格将保持空白。Anthony，这在删除选择器类中的空格后起作用-它应该是“…tr.hidden…”，谢谢！对你说得对。我将在上面的答案中解决这个问题。很高兴能帮上忙！

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