根据在多个 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 中选择的类的所有 div，id 为“ddlSelect”，并隐藏那些您没有选择的类。 你可以把它放到一个函数中，并在 ddlSelect 的 onchange 事件或任何你想要的情况下调用它。