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
source to share
1 answer
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>
+12
source to share