Jquery 搜索多个 select 组合框

Question

我有一个多个 select 的盒子和一个带有一些卡片的棋盘。我需要的是：我想使用多个 selection 搜索用户，相应的卡片将出现在屏幕上。其他的会实时消失

当我需要清洁过滤器时，按 deselect，过滤器就会干净。

Select all 将带来所有用户。

我不知道该怎么做。

有人可以帮助我吗？

谢谢。

这是我的代码：

代码

$('select').selectpicker();

        $('select').on('change', function() {

            var selected = $(this).find("option:selected");

            var arrSelected = [];
            
            selected.each(function() {

                arrSelected.push($(this).val());
                
                alert('' + arrSelected);
            });
        });

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/60a0c4a03b.js" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.3.1/jquery.quicksearch.js"></script>

<nav class="navbar navbar-light justify-content-center mt-2">
    <form class="form-row">
        <div class="form-group col-md-6">
          <label for="userSelect">User</label>
          <br/>
          <select class="selectpicker" multiple="" data-live-search="true" data-actions-box="true" title="Select user(s)" name="userSelect">
             <option>John</option>
             <option>James</option>
             <option>Stuart</option>
             <option>Eric</option>
             <option>Earl</option>
           </select>
         </div>
    </form>
</nav>
<div class="layout-margin-8 mt-4">
    <div class="card-deck">
        <div class="card text-white bg-success mb-3 text-center">
            <div class="card-body">
                <h4 class="card-title">0001</h4>
                <p class="card-text nome">John</p>
            </div>
        </div>
        <div class="card text-white bg-success mb-3 text-center">
            <div class="card-body">
                <h4 class="card-title">0002</h4>
                <p class="card-text nome">James</p>
            </div>
        </div>
        <div class="card text-white bg-success mb-3 text-center">
            <div class="card-body">
                <h4 class="card-title">0003</h4>
                <p class="card-text nome">Stuart</p>
            </div>
        </div>
        <div class="card text-white bg-success mb-3 text-center">
            <div class="card-body">
                <h4 class="card-title">0004</h4>
                <p class="card-text nome">Eric</p>
            </div>
        </div>
        <div class="card text-white bg-success mb-3 text-center">
            <div class="card-body">
                <h4 class="card-title">0005</h4>
                <p class="card-text nome">Earl</p>
            </div>
        </div>
    </div>
</div>

JSFiddle link

Answer 1

您可以使用 .length 来查看是否没有选定的值，如果是，则只需使用 .show().

显示所有 cards

现在，要仅显示选定的卡片，您可以使用 filter 并在所选值匹配时循环遍历您的卡片，然后显示该卡片。

演示代码 :

$('select').selectpicker();

$('select').on('change', function() {
  var selected = $(this).find("option:selected");
  //checking selcted value length is 0 ( no option slected)
  if (selected.length == 0) {
    console.log("show all cards")
    $(".card").show();//show cards
  } else {
    $(".card").hide();//hide cards
    selected.each(function() {      
      var select = $(this).val();
      //filter cards
      $(".card").filter(function() {
        return $(this).find('.nome').text().indexOf(select) == 0;
      }).show();//show card which match
    });
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.3.1/jquery.quicksearch.js"></script>

<nav class="navbar navbar-light justify-content-center mt-2">
  <form class="form-row">
    <div class="form-group col-md-6">
      <label for="userSelect">User</label>
      <br/>
      <select class="selectpicker" multiple="" data-live-search="true" data-actions-box="true" title="Select user(s)" name="userSelect">
        <option>John</option>
        <option>James</option>
        <option>Stuart</option>
        <option>Eric</option>
        <option>Earl</option>
      </select>
    </div>
  </form>
</nav>
<div class="layout-margin-8 mt-4">
  <div class="card-deck">
    <div class="card text-white bg-success mb-3 text-center">
      <div class="card-body">
        <h4 class="card-title">0001</h4>
        <p class="card-text nome">John</p>
      </div>
    </div>
    <div class="card text-white bg-success mb-3 text-center">
      <div class="card-body">
        <h4 class="card-title">0002</h4>
        <p class="card-text nome">James</p>
      </div>
    </div>
    <div class="card text-white bg-success mb-3 text-center">
      <div class="card-body">
        <h4 class="card-title">0003</h4>
        <p class="card-text nome">Stuart</p>
      </div>
    </div>
    <div class="card text-white bg-success mb-3 text-center">
      <div class="card-body">
        <h4 class="card-title">0004</h4>
        <p class="card-text nome">Eric</p>
      </div>
    </div>
    <div class="card text-white bg-success mb-3 text-center">
      <div class="card-body">
        <h4 class="card-title">0005</h4>
        <p class="card-text nome">Earl</p>
      </div>
    </div>
  </div>
</div>

Jquery 搜索多个 select 组合框

Jquery search at multiple select combobox

jquery

bootstrap-4

bootstrap-selectpicker