两个互相链接的HTML选择框 [英] Two HTML-select boxes linked to each other

问题描述

Hellloooooo ...
我有两个< select> 类似输入

 < select id =sel1> 
< option value =a> a< / option> 
< option value =b> b< / option> 
< / select> 
 
< select id =sel2> 
 //如果上面选择了'a'，
 //< option> apple< / option> ;,< option>飞机< / option> 
 //如果上面选择了'b'，
 //< option> banana< / option> ;,< option> book< / option> 
< / select> 
  

我想根据 sel1中的选项列出不同的选项集。
我可以使用onchange属性来获取选定的值，如下所示：

 < select id =sel1onchange = giveSelection（这） > 
< script type =text / javascript> 
函数giveSelection（sel）{
 var selected = sel.value; 
} 
< / script> 
  

但我不能想出一种方法来使用此值在 SEL2 。
帮助！

解决方案

你几乎到了那里。因为您已经获得了 sel1 的值，剩下的就是根据该值过滤 sel1 的选项。

  var sel1 = document.querySelector（'＃sel1'）; var sel2 = document.querySelector（'＃sel2'）; var options2 = sel2。 querySelectorAll（'option'）;函数giveSelection（selValue）{sel2.innerHTML =''; for（var i = 0; i< option2.length; i ++）{if（options2 [i] .dataset.option === selValue）{sel2.appendChild（options2 [i]）; }}} giveSelection（sel1.value）;  

< select id =sel1onchange =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>飞机< / option> < option data-option =b> banana< / option> < / option>< / code>< / pre>< / div>< / div>< / p>

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!

解决方案

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>

这篇关于两个互相链接的HTML选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！