时间戳

首页 > 解决方案 > 使用 select2 框值过滤表

javascript - 使用 select2 框值过滤表

问题描述

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

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

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

标签： javascriptjqueryhtmlfrontendjquery-select2

解决方案

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

推荐阅读