JQuery Фильтр следующей группы выбора на основе выбора предыдущей группы выбора

Question

Поэтому мне нужно выбрать три окна выбора (все мультиселекторы).

Идея состоит в том, что существует множество различных типов десертов, и вместо того, чтобы иметь один огромный многоэкранный ящик, я включаю в себя два других блока с несколькими выделениями, чтобы сузить то, что пользователь должен щелкнуть.

В этом случае они сначала проходят через «layer1», нажимают «Cookie», а затем на втором уровне должны отображаться только «Проброшенные Cookie» и «Iced Cookie».

Затем, на «layer2», если они выбрали как спринклерные файлы cookie, так и Iced Cookie, затем «Dark Sprinkled Cookie» и «White Sprinkled Cookie», а White Iced Cookie должны появиться на «layer3».

У меня возникли проблемы с настройкой фильтра и заменой текста html на правильный результат.

<select id="layer1" multiple="multiple"> 
    <option my_id=3>Chocolate</option> 
    <option my_id=5>Cookie</option> 
</select> 

<select id="layer2" multiple="multiple"> 
    <option parent_id=3 my_id=6>Milk Chocolate</option> 
    <option parent_id=5 my_id =7>Sprinkled Cookie</option> 
    <option parent_id=5 my_id =8>Iced Cookie</option> 
</select> 

<select id="layer3" multiple="multiple"> 
    <option parent_id=7 my_id=10 >Dark Sprinked Cookie</option> 
    <option parent_id=7 my_id=11 > White Sprinkled Cookie</option> 
    <option parent_id=8 my_id=12> White Iced Cookie </option> 
</select> 
<script> 
$("select") 
    .change(function() { 
    console.log($(this).attr('id')); //tells me the layer i think 
    nextlayerstuff = //get the next layer somehow 
    options = $(nextstuff).filter(not sure what to do here).html() 
    //somehow display the new select options for the next layer 
</script> 

Answer 1

Интересный сценарий. Пара указателей: сначала вам нужно кэшировать все значения, которые вы хотите соответственно добавить или удалить. Вероятно, вам следует сопоставить выбор родителя и ребенка (в отличие от того, чтобы просто полагаться на соответствующие варианты родителя и ребенка). Также было бы неплохо переместить эти идентификаторы на атрибуты данных, а не на пользовательские атрибуты. Я собрал демо, которое может работать для ваших целей. Код более или менее полностью документирован.

$("select").each(function(){ 
 
    // cache all options 
 
    $(this).data('options', $('option', this)); 
 
}).on('change', function(e){ 
 
    var current = this, selected = []; 
 
    
 
    // find all selected for the current select and 
 
    // store them in a local variable 
 
    $('option:selected', current).each(function(){ 
 
     selected.push($(this).data('id')); 
 
    }); 
 
    
 
    // find all selects that depend on this one. 
 
    $("select").filter(function(){ 
 
     return $(this).data('depends-on') === current.id; 
 
    }).each(function(){ 
 
     // search our cached options and filter them 
 
     // by the selected option(s). Store them in 
 
     // a local variable. 
 
     var children = $(this).data('options').filter(function(){ 
 
      return selected.indexOf($(this).data('parent')) > -1; 
 
     }); 
 
     
 
     // empty and repopulate the select with the 
 
     // filtered results. Also, trigger the next 
 
     // select so the effect cascades. 
 
     $(this).empty().append(children).trigger('change'); 
 
    }); 
 
}).trigger('change'); // trigger change so it filters 
 
         // on page load.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="layer1" multiple="multiple"> 
 
    <option data-id="3">Chocolate</option> 
 
    <option data-id="5">Cookie</option> 
 
</select> 
 

 
<select id="layer2" data-depends-on="layer1" multiple="multiple"> 
 
    <option data-parent="3" data-id="6">Milk Chocolate</option> 
 
    <option data-parent="5" data-id="7">Sprinkled Cookie</option> 
 
    <option data-parent="5" data-id="8">Iced Cookie</option> 
 
</select> 
 

 
<select id="layer3" data-depends-on="layer2" multiple="multiple"> 
 
    <option data-parent="7" data-id="10">Dark Sprinked Cookie</option> 
 
    <option data-parent="7" data-id="11"> White Sprinkled Cookie</option> 
 
    <option data-parent="8" data-id="12"> White Iced Cookie </option> 
 
</select>