0

現在、ページの上部にドロップダウンがあり、その下に長いリスト (4 行 83 個のボックス) があります。

シナリオは次のとおりです。

ドロップダウンの州のリストから州を選択すると、その州に一致しないリスト内の項目がフェードアウトし、一致する項目が一番上に「ポップアップ」します。デフォルトに戻ると、他のすべてがフェードインします。

状態に一致するアイテムがない場合、「オプションが見つかりません」というメッセージを表示します

どこかのポートフォリオでこれが行われているのを見たことがあると確信していますが、これを達成する方法については本当に手がかりがありません. 誰かがこれを実装する方法についてアイデアを持っていますか、または私を正しい方向に向けることができますか?

<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 に答える