如何使用多个 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 允许过滤到表，但一次只处理一个过滤器。我想知道如何使选择一起工作，例如让 CSM Events in Austin 显示而隐藏其他所有内容？

提前致谢。

编辑：这是一个小提琴https://jsfiddle.net/5202jsax/6/

Answer 1

我能想到的让您的选择器协同工作（无需更改太多代码）的最佳方法是：

1. 创建两个新的 CSS 类：“hidden-course”和“hidden-location”
2. 当您想基于“课程”隐藏/显示表格行时，您可以添加/删除“隐藏课程”类而不是使用 .show()/.hide()
3. 当您想根据“位置”隐藏/显示表格行时，添加/删除“隐藏位置”类而不是使用 .show()/.hide()

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

如果这有帮助，请告诉我。如果这成功解决了您的问题，请标记我的回答“回答”了您的问题。