Jquery根据上一个选择组的选择过滤下一个选择组

Question

所以我需要一个用户选择三个选择框（都是多选）。

我们的想法是，有许多不同的特定类型的甜点，而不是一个巨大的多选框，我包括另外两个多选框来缩小用户必须点击的范围。

在这种情况下，他们首先通过“layer1”，点击 Cookie，然后第二层应该只显示 Sprinkled Cookie 和 Iced Cookie。

然后，如果他们同时选择 Sprinkled Cookie 和 Iced Cookie，则在“layer2”上，然后 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

一个有趣的场景。几个指针：您需要先缓存所有值，然后相应地添加或删除它们。您可能应该关联父选择和子选择（而不是仅仅依赖关联的父和子选项）。将这些 id 移动到数据属性而不是自定义属性也可能不是一个坏主意。我已经整理了一个可能对您有用的演示。代码或多或少都有完整的文档记录。

$("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>