0

我目前在页面顶部有下拉列表，下面有一个长列表（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>
4

1 回答 1

1

首先，为 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-26T21:40:48.313 回答