使用Jquery通过Dropdown过滤“项目”

我目前在页面顶部有一个Dropdown，在它下面有一个长列表（在4行中有83个框）。使用Jquery通过Dropdown过滤“项目”

下面是这种情况：

我选择状态的下拉列表中的状态，然后在列表中没有的状态相匹配的项目淡出允许匹配项目“弹出”到顶端。一旦你回到默认情况下，所有其他褪色回。

如果没有匹配的项目的状态，我会显示一条消息“没有选项发现”

我敢肯定我见过这在投资组合的某个地方完成，但我真的不知道如何实现这一目标。有没有人有关于如何实现这个想法，或者可以指向正确的方向？

<select id="filter" name="filter"> 
    <option value="-1">Filter items</option> 
    <option value="sc">South Carolina</option> 
    <option value="nc">North Carolina</option> 
</select> 



<div id="container"> 

<div class="box state-nc"></div> 
<div class="box state-sc"></div> 
<div class="box state-nc"></div> 
<div class="box state-sc"></div> 
<div class="box state-nc"></div> 
<div class="box state-sc"></div> 
<div class="box state-nc"></div> 
<div class="box state-sc"></div>  
</div>

来源

2012-09-26 Louis Stephens

提示：获取一个触发的事件在特定元素的值的变化，然后执行对其余元素的淡化操作取决于其状态 –

请查看[quicksand plugin]（http://razorjack.net/quicksand/）。我已经实现了这个使用选择组合框也.. – kingkode

你真的需要显示你的工作到目前为止，所以我们至少可以提出一个解决方案。 – weexpectedTHIS

首先，使用一个固定的宽度/高度为83项并将它们所有浮到左边，所以他们自然地形成的4个项目的行和将重新流（“弹出”）时一些得到隐。

为每个项目提供类似“state-ca”或“state-or”（或者如果您更喜欢data-state =“ca”或data-state =“or”）。然后是这样的：

var $all_items = $('.item'); 
var state = $dropdown.val(); 
var $items = $('.item[class!="state-' + state + '"]'); 
// or this: 
// var $items = $('.item[data-state!="' + state + '"]'); 
if ($items.size() == $all_items) { 
    $all_items.fadeOut(); 
    // show "no options found" instead 
} else { 
    $all_items.show(); 
    $items.fadeOut(); 
}

（未测试，所以我敢肯定，你需要做出一些调整。）

来源

2012-09-26 21:40:48

使用Jquery通过Dropdown过滤“项目”

回答

相关问题