javascript - 通过下拉列表使用 Jquery 过滤 "items"

Question

我目前在页面顶部有一个下拉列表，在它下面有一个长列表(83 个框，每行 4 行)。

场景如下:

我从下拉列表中的状态列表中选择一个状态，列表中与该状态不匹配的元素淡出，允许匹配的元素“弹出”到顶部。一旦您回到默认设置，所有其他设置都会淡出。

如果某个状态没有匹配项，我会显示一条消息“找不到选项”

我很确定我已经在某个地方的投资组合中看到过这种做法，但我真的不知道如何实现这一点。有没有人知道如何实现这个，或者可以指出正确的方向？

<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>

Answer 1

首先，对 83 个元素使用固定的宽度/高度，并将它们全部 float 到左侧，因此它们自然形成 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();
}

(未经测试，所以我确定您需要进行一些调整。)