Two HTML-select boxes linked to each other - html

Question

Hellloooooo...
I have two <select> inputs like this
<select id="sel1">
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="sel2">
//if 'a' is selected above,
//<option>apple</option>, <option>airplane</option>
//if 'b' is selected above,
//<option>banana</option>, <option>book</option>
</select>
And I want to list different sets of options according to the selection in sel1.
I could get the selected value using onchange attribute like this:
<select id="sel1" onchange="giveSelection(this)">
<script type="text/javascript">
function giveSelection(sel) {
var selected = sel.value;
}
</script>
But I can't come up with a way to use this value to output different select options in sel2.
Help please!

Answer 1

You almost got there. As you already got sel1's value, the rest is to filter options for sel1 based on the value.
var sel1 = document.querySelector('#sel1');
var sel2 = document.querySelector('#sel2');
var options2 = sel2.querySelectorAll('option');
function giveSelection(selValue) {
sel2.innerHTML = '';
for(var i = 0; i < options2.length; i++) {
if(options2[i].dataset.option === selValue) {
sel2.appendChild(options2[i]);
}
}
}
giveSelection(sel1.value);
<select id="sel1" onchange="giveSelection(this.value)">
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="sel2">
<option data-option="a">apple</option>
<option data-option="a">airplane</option>
<option data-option="b">banana</option>
<option data-option="b">book</option>
</select>

Answer 2

I drummed up a version that can handle an unlimited amount of select combo dropdown list boxes, using jQuery. Hope this is useful to someone.
function jq_ChainCombo(el) {
var selected = $(el).find(':selected').data('id'); // get parent selected options' data-id attribute
// get next combo (data-nextcombo attribute on parent select)
var next_combo = $(el).data('nextcombo');
// now if this 2nd combo doesn't have the old options list stored in it, make it happen
if(!$(next_combo).data('store'))
$(next_combo).data('store', $(next_combo).find('option')); // store data
// now include data stored in attribute for use...
var options2 = $(next_combo).data('store');
// update combo box with filtered results
$(next_combo).empty().append(
options2.filter(function(){
return $(this).data('option') === selected;
})
);
// now enable in case disabled...
$(next_combo).prop('disabled', false);
// now if this combo box has a child combo box, run this function again (recursive until an end is reached)
if($(next_combo).data('nextcombo') !== undefined )
jq_ChainCombo(next_combo); // now next_combo is the defining combo
}
// quick little jquery plugin to apply jq_ChainCombo to all selects with a data-nextcombo on them
jQuery.fn.chainCombo = function() {
// find all divs with a data-nextcombo attribute
$('[data-nextcombo]').each(function(i, obj) {
$(this).change(function (){
jq_ChainCombo(this);
});
});
}();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--
// select boxes...
1) first combo simply add data-nextcombo (class, id, etc) and onchange function
2) next combo that is controlled by first, add data-nextcombo (add onchange="jq_ChainCombo(this)" if not using the jquery plugin) and disable to hide entire option list until required.
3) last combo, don't bother adding a data-nextcombo to it
// data...
1) data should have a data-id, and data-option tag
2) data-option should be -1 if it is the root combo box, or if a child combo, the data-option should be the data-id of the parent.
-->
<!-- parent -->
<select class="combo-a" data-nextcombo=".combo-b">
<option value="1" data-id="1" data-option="-1">Bob's Coffee</option>
<option value="2" data-id="2" data-option="-1">Sally's Diner</option>
<option value="3" data-id="3" data-option="-1">Jim's Waffle House</option>
<option value="4" data-id="4" data-option="-1">No Mart</option>
<option value="5" data-id="5" data-option="-1">Ye Olde Ale Tavern</option>
</select>
<!-- child -->
<select class="combo-b" data-nextcombo=".combo-c" disabled>
<option></option>
<option value="1" data-id="1" data-option="1">15th's Avenue Coffee House</option>
<option value="2" data-id="2" data-option="4">14th Street location</option>
<option value="3" data-id="3" data-option="4">13th Avenue</option>
<option value="4" data-id="4" data-option="3">Scarlet Temple Location</option>
<option value="5" data-id="5" data-option="2">New Jack City</option>
<option value="6" data-id="6" data-option="5">Bob street</option>
<option value="7" data-id="7" data-option="1">Billy Avenue</option>
</select>
<!-- child/last -->
<select class="combo-c" disabled>
<option></option>
<option value="4" data-id="4" data-option="2">new display</option>
<option value="3" data-id="3" data-option="3">new display</option>
<option value="5" data-id="5" data-option="2">new display</option>
<option value="6" data-id="6" data-option="2">new display</option>
<option value="7" data-id="7" data-option="4">display #1</option>
<option value="8" data-id="8" data-option="5">new display</option>
<option value="9" data-id="9" data-option="5">new display</option>
<option value="10" data-id="10" data-option="5">new display</option>
<option value="11" data-id="11" data-option="5">new display</option>
<option value="12" data-id="12" data-option="5">new display</option>
<option value="13" data-id="13" data-option="6">new display</option>
<option value="14" data-id="14" data-option="6">new display</option>
<option value="15" data-id="15" data-option="6">new display</option>
<option value="16" data-id="16" data-option="1">Front's Counter</option>
<option value="17" data-id="17" data-option="1">back counter</option>
<option value="18" data-id="18" data-option="4">display #2</option>
</select>