html - 两个相互链接的 HTML 选择框

Question

天啊……我有两个 <select>像这样输入

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

我想根据 sel1 中的选择列出不同的选项集.我可以像这样使用 onchange 属性获取选定的值:

<select id="sel1" onchange="giveSelection(this)">
<script type="text/javascript">
  function giveSelection(sel) {
    var selected = sel.value;
  }
</script>

但我无法想出一种方法来使用此值在 sel2 中输出不同的选择选项.请帮忙!

Answer 1

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

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>