Two HTML-select boxes linked to each other

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>