jQuery筛选基于上一个选择组的下一个选择组 [英] Jquery Filter next select group based on selection of previous select group

问题描述

因此，我需要用户选择三个选择框(全部为多选).

So I need a user to select three select boxes (all multiselect).

这个想法是，有很多不同类型的甜点，我没有一个巨大的多重选择框，而是包括了另外两个多重选择框以缩小用户的单击范围.

The idea is that there are many different specific types of desserts, and instead of having one huge multi-select box, I include two other multi-select boxes to narrow down what the user has to click.

在这种情况下，他们首先通过"layer1"，单击Cookie，然后第二层应仅显示Sprinkled Cookie和Iced Cookie.

In this case, they first go through the "layer1", click on Cookie, and then the second layer should only show Sprinkled Cookie and Iced Cookie.

然后，在"layer2"上，如果他们同时选择了Sprinkled Cookie和Iced Cookie，则Dark Sprinkled Cookie和White Sprinkled Cookie和White Iced Cookie应该显示在"layer3"上.

Then, on the "layer2" if they select both Sprinkled Cookie and Iced Cookie, then Dark Sprinkled Cookie and White Sprinkled Cookie, and White Iced Cookie should show up on "layer3".

我在弄清楚如何做过滤器以及用正确的结果替换html文本时遇到了麻烦.

I'm having trouble figuring out how to do the filter and replacing the html text with the right result.

<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>

推荐答案

一个有趣的场景.几个指针:您需要首先缓存所有值，然后将它们相应地添加或删除.您可能应该关联父项和子项选择(而不是仅仅依赖于相关的父项和子项选项).将这些ID移至数据属性而不是自定义属性可能也不是一个坏主意.我整理了一个可能适合您目的的演示.该代码或多或少都有完整的记录.

An interesting scenario. Couple of pointers: you'll need to cache all the values first, which you will want to add or remove accordingly. You should probably associate parent and child selects (as opposed to just relying on relating parent and child options). It also probably wouldn't be a bad idea to move those ids to data attributes rather than custom attributes. I've put together a demo that might work for your purposes. The code is more or less fully documented.

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

这篇关于jQuery筛选基于上一个选择组的下一个选择组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！