Two HTML-select blocks linked to each other

Question

Two HTML-select blocks linked to each other

Hellloooooo ... I have two inputs <select>

like

<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 parameters according to the selection in sel1

. I could get the selected value using the 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 think of a way to use this value to display various select options in sel2

. Help me please!

+3

html html-select forms

Yun c han Dec 28. 14 at 5:36 am

source to share

1 answer

Leo · Accepted Answer · 2014-12-28T05:56:05+0000

You almost got there. Since you already have a value sel1

, the rest is filter options for sel1

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

Run code Hide result

Two HTML-select blocks linked to each other

More articles: