Mootools Выбор фильтрации

Question

Я хотел бы показать конкретные <li> элементы, когда я нажимаю на одном из вариантов от такого <select>:

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

Это мой <li> «s, которые будут получать отфильтрованные, чтобы показать только выбранную группу.

<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. Благодаря!

Answer 1

Вам нужна переменная состояния, которая отслеживает, находитесь ли вы в выбранной группе, итерации по элементам 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'); 
     } 
    }); 
});