如何使用多个select2框过滤表? [英] How to filter a table using multiple select2 boxes?

问题描述

我正在尝试使用和多个select2框的类过滤表.

I am trying to filter a table using the class of the and multiple select2 boxes.

表格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活动中显示其他所有内容?

The current JS allows filtering to the table but only handles a single filter at a time. I am wondering how can I make the selects work together for example having the CSM Events in Austin show and everything else hide?

谢谢.

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

推荐答案

我想让选择器协同工作(无需更改太多代码)的最佳方法是:

The best way I can think of getting your selectors to work together (without changing too much code) is to:

1. 创建两个新的CSS类:隐藏路线"和隐藏位置"
2. 当您要基于课程"隐藏/显示表格行时，可以使用.show()/.hide()添加/删除隐藏课程"类INSTEAD
3. 当您要基于位置"隐藏/显示表行时，可以添加/删除使用.show()/.hide()的隐藏位置"类INSTEAD

新类的CSS看起来像这样:

The css for the new classes would look like this:

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

例如，如果我们忽略表头(thead)元素中的活动，则课程"功能将变为:

For example, if we ignore the activity in the table head (thead) element, the "course" function would become:

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

请告诉我这是否有帮助.如果此操作成功解决了您的问题，请标记为我的答案回答"了您的问题.

Please let me know if this was helpful. If this successfully solves your issue, please mark that my answer "answered" your question.

这篇关于如何使用多个select2框过滤表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！