so need user select 3 select boxes (all multiselect).
the idea there many different specific types of desserts, , instead of having 1 huge multi-select box, include 2 other multi-select boxes narrow down user has click.
in case, first go through "layer1", click on cookie, , second layer should show sprinkled cookie , iced cookie.
then, on "layer2" if select both sprinkled cookie , iced cookie, dark sprinkled cookie , white sprinkled cookie, , white iced cookie should show on "layer3".
i'm having trouble figuring out how filter , replacing html text 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 layer think nextlayerstuff = //get next layer somehow options = $(nextstuff).filter(not sure here).html() //somehow display new select options next layer </script>
an interesting scenario. couple of pointers: you'll need cache values first, want add or remove accordingly. should associate parent , child selects (as opposed relying on relating parent , child options). wouldn't bad idea move ids data attributes rather custom attributes. i've put demo might work purposes. code more or less documented.
$("select").each(function(){ // cache options $(this).data('options', $('option', this)); }).on('change', function(e){ var current = this, selected = []; // find selected current select , // store them in local variable $('option:selected', current).each(function(){ selected.push($(this).data('id')); }); // find selects depend on one. $("select").filter(function(){ return $(this).data('depends-on') === current.id; }).each(function(){ // search our cached options , filter them // selected option(s). store them in // local variable. var children = $(this).data('options').filter(function(){ return selected.indexof($(this).data('parent')) > -1; }); // empty , repopulate select // filtered results. also, trigger next // select effect cascades. $(this).empty().append(children).trigger('change'); }); }).trigger('change'); // trigger change 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>
Comments
Post a Comment