Question

我正在尝试使用多个select2框过滤表。

jQuery(function() {

  jQuery('.js-example-basic-multiple').select2();
  jQuery('.js-example-basic-multiple').on("select2:select", function(e) {
    var loc = $('.js-example-basic-multiple').val();
    jQuery('#events-table td.hidden-location').removeClass('hidden-location');
    jQuery('#events-table td:not(".' + loc + '")').addClass('hidden-location');
    if (loc == 'all') {
      jQuery('#events-table tr').removeClass('hidden-location');
    }
  });
});

select {
  width: 300px;
}

tr {
  background: white;
}

td {
  border: 1px solid #555;
}

.hidden-location {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<select class="js-example-basic-multiple" multiple>
  <optgroup label="CS">
    <option value="MSC5-x">MSC5</option>
    <option value="MSC6-x">MSC6</option>
    <option value="MSC7-x">MSC7</option>
    <option value="MSC8-x">MSC8</option>
    <option value="MSC9-x">MSC9</option>
    <option value="MSC10-x">MSC10</option>

  </optgroup>
</select>

<table id="events-table" class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>MSC5</th>
      <th>MSC6</th>
      <th>MSC7</th>
      <th>MSC8</th>
      <th>MSC9</th>
      <th>MSC10</th>


    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td class="MSC5-x">X</td>
      <td class="MSC6-x">X</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>

    </tr>
    <tr>
      <td>2</td>
      <td class="MSC5-x">X</td>
      <td class="MSC6-x">X</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>

    </tr>
    <tr>
      <td>3</td>
      <td class="MSC5-x">X</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td class="MSC10-x">X</td>

    </tr>
    <tr>
      <td>4</td>
      <td class="MSC5-x">X</td>
      <td class="MSC6-x">X</td>
      <td></td>
      <td></td>
      <td class="MSC9-x">X</td>
      <td></td>

    </tr>
    <tr>
      <td>5</td>
      <td></td>
      <td class="MSC6-x">X</td>
      <td></td>
      <td class="MSC8-x">X</td>
      <td></td>
      <td></td>

    </tr>

  </tbody>
</table>

现在我想使用多个选择的值来过滤外部表，似乎无法正常工作，请在此站点example而不是下面的站点上进行检查，也许jsfiddle可以更清楚地提出我的问题我该如何解决这个问题？

只是修改了一些东西，看起来更好，但仍然无法正常工作

Answer 1

首先使用jquery cdn链接，而不使用此文件/select2.min.js，最后使用jquery函数。

使用select2 box值过滤表格

1 个答案: