根据在多个select2下拉列表中选择的值显示/隐藏div

Question

我正在构建搜索结果过滤功能。我有一些 select2 下拉框，用户可以从中选择多个值来隐藏或显示具有匹配类值的div。我有一些div个类，其中的类包含与 select2 下拉框中的值匹配的值。我该如何编写此功能？

我只能将其用于一个选项，我希望能够从下拉列表中选择多个选项。

$('select.filterCandidates').bind('change', function() {
  $('select.filterCandidates').attr('disabled', 'disabled');
  $('#candidates').find('.row').hide();
  var critriaAttribute = '';

  $('select.filterCandidates').each(function() {
    if ($(this).val() != '0') {
      critriaAttribute += '[data-' + $(this).data('attribute') + '*="' + $(this).val() + '"]';
    }
  });

  $('#candidates').find('.row' + critriaAttribute).show();
  $('#filterCount').html('Showing ' + $('div#candidates div.row:visible').length + ' Matches');
  $('select.filterCandidates').removeAttr('disabled');
});

$('#reset-filters').on("click", function() {
  $('#candidates').find('.row').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <br>
    <h4>Search Form</h4>
    <br>
  </div>
  <div class="col-md-4">
    <div class="form-group">
      <select id="type" class="form-control filterCandidates" data-attribute="type">
        <option value="0">Candidate Type</option>
        <option value="CA">CA</option>
        <option value="CFA">CFA</option>
        <option value="CFO">CFO</option>
        <option value="CIMA">CIMA</option>
      </select>
    </div>
  </div>
  <div class="col-md-4">
    <div class="form-group">
      <select id="role" class="form-control filterCandidates" data-attribute="role">
        <option value="0">Preferred Role</option>
        <option value="Analyst">Analyst</option>
        <option value="Associate">Associate</option>
        <option value="CFO">CFO</option>
        <option value="FD">FD</option>
        <option value="FM">FM</option>
      </select>
    </div>
  </div>

  <div class="col-md-4">
    <div class="form-group">
      <select id="roleType" class="form-control filterCandidates" data-attribute="roleType">
        <option value="0">Preferred Role Type</option>
        <option value="Permanent">Permanent</option>
        <option value="Contract/Interim">Contract/Interim</option>
        <option value="Internship">Internship</option>
      </select>
    </div>
  </div>
</div>

Answer 1

只是为了给你一个粗略的想法，因为你没有提供任何代码。

<script>
   var SelectedValues = $('#ddlSelect option:selected');
   var NotSelectedValues $('#ddlSelect option:not(:selected)');
        $(SelectedValues ).each(function () {
        $("."+$(this).val()+"").show(); //show all those divs containing 
        //this class

        });
        $(NotSelectedValues ).each(function () {
        $("."+$(this).val()+"").hide();//hide all those divs containing 
        //this class

        });
</script>

这是一个粗略的想法，上面的脚本将显示包含您在select2中选择的ID为“ddlSelect”的所有类的div，并隐藏那些您未选择的类。 你可以将它放入一个函数中并在ddlSelect的onchange事件或任何你想要它的时候调用它。