0

次のような<li>オプションのいずれかをクリックすると、特定の要素が表示され<select>ます。

<select>
    <option value="f_chzn_g_0">Group One</option>
    <option value="f_chzn_g_4">Group Two</option>
</select>

これは、<li>選択したグループのみを表示するようにフィルタリングされる私のものです。

<ul>
    <li id="f_chzn_g_0" class="group-result">Group One</li>
    <li id="f_chzn_o_1" class="active-result group-option" style="">one</li>
    <li id="f_chzn_o_2" class="active-result group-option" style="">two</li>
    <li id="f_chzn_o_3" class="active-result group-option" style="">three</li>
    <li id="f_chzn_g_4" class="group-result">Group Two</li>
    <li id="f_chzn_o_5" class="active-result group-option" style="">one</li>
    <li id="f_chzn_o_6" class="active-result group-option" style="">two</li>
    <li id="f_chzn_o_7" class="active-result group-option" style="">three</li>
</ul>

誰かがこれで私を助けることができますか? それはすべて Mootools にある必要があります。ありがとう！

4

1 に答える 1

0

li要素を反復処理するときに、選択したグループにいるかどうかを追跡する状態変数が必要です。liクラスを追加して要素を表示すると仮定するとactive-result、次のように動作するはずです。

function showSelectedListItems(ulElem, selectedId) {
    var inSelectedGroup = false;

    ulElem.getElements('li').each(function(liElem) {
        if (!inSelectedGroup) {
            if (liElem.id == selectedId) inSelectedGroup = true;
        }
        else {
            if (liElem.hasClass('group-result') inSelectedGroup = false;
            else liElem.addClass('active-result');
        }
    });
});
于 2013-03-13T18:04:51.940 に答える