使用下拉列表 jquery 插件过滤页面上的 div

Question

我有一个包含很多类似 <div> 元素的页面，我需要允许用户通过从下拉列表中选择值来过滤它。有没有简单的 jquery 插件可以做到这一点？我找到了 http://luis-almeida.github.io/filtrify/ 但它太复杂了，我只需要通过下拉列表进行简单的过滤。

Answer 1

取决于您的过滤逻辑，但像这样？

<select id="sel">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>

<div class="filt one">one</div>
<div class="filt one">one</div>
<div class="filt one">one</div>
<div class="filt one">one</div>
<div class="filt one">one</div>
<div class="filt one">one</div>
<div class="filt two">two</div>
<div class="filt two">two</div>
<div class="filt two">two</div>
<div class="filt two">two</div>
<div class="filt three">three</div>

<script> 
$("#sel").on("change", function(){
$(".filt").show();
$("."+$(this).val()).hide();
});
</script>

使用下拉列表 jquery 插件过滤页面上的 div

Filtering div's on page using drop down list jquery plugin

html

javascript

css

jquery

filtering