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事件并隐藏其他一切？

提前致谢。

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

Answer 1

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

创建两个新的css类：＆＃34; hidden-course＆＃34;和＆＃34; hidden-location＆＃34;
当你想隐藏/显示基于＆＃34;课程＆＃34;的表格行时，你可以添加/删除＆＃34; hidden-course＆＃34;使用.show（）/。hide（）
当您想要隐藏/显示基于＆＃34; location＆＃34;的表格行时，您可以添加/删除＆＃34;隐藏位置＆＃34;使用.show（）/。hide（）

新类的css如下所示：

vjs-show-big-play-button-on-pause

例如，如果我们忽略表头（thead）元素中的活动，那么＆＃34; course＆＃34;功能会变成：

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

如果这有用，请告诉我。如果这成功解决了您的问题，请标记我的答案＆＃34;已回答＆＃34;你的问题。

如何使用多个select2框过滤表格？

1 个答案: