下拉列表值取决于另一个下拉列表中的选定值

一些名字

我有 6 个不同的项目：

Type1Item1
Type1Item2
Type1Item3

Type2Item1
Type2Item2
Type2Item3

2种不同类型：

Type1
Type2

我想提供 2 个 DropDownLists：一个选择类型，另一个选择所选类型的项目。

只写

<select name="ItemTypeSelector" id="ItemTypeSelector">
  <option value="Type1">Type1</option>
  <option value="Type2">Type2</option>
</select><br>

<select name="ItemSelector" id="ItemSelector">
  <option value="Type1Item1">Type1Item1</option>
  <option value="Type1Item2">Type1Item2</option>
  <option value="Type1Item3">Type1Item3</option>
  <option value="Type2Item1">Type2Item1</option>
  <option value="Type2Item2">Type2Item2</option>
  <option value="Type2Item3">Type2Item3</option>
</select><br>

JSFiddle 演示

将允许用户选择Type2andType1Item3没有意义，因为Type1Item3是 type Type1。

问题：有没有办法显示Item与所选 s 相关的下拉列表的 s ItemType？

亚历山大·埃尔绍博克希

也许类似于以下内容：

window.onload = function() {
  document.getElementById('ItemTypeSelector').addEventListener('change', function() {
    if (this.value == 'Type1') {
      for (let el of document.getElementsByClassName('Type1')) el.style.display = 'block';
      for (let el of document.getElementsByClassName('Type2')) el.style.display = 'none';
      document.getElementById('ItemSelector').getElementsByTagName('option')[0].selected = 'selected'
    } else {
      for (let el of document.getElementsByClassName('Type1')) el.style.display = 'none';
      for (let el of document.getElementsByClassName('Type2')) el.style.display = 'block';
      document.getElementById('ItemSelector').getElementsByTagName('option')[3].selected = 'selected'
    }
  }, false)
  for (let el of document.getElementsByClassName('Type2')) el.style.display = 'none';
};

<select name="ItemTypeSelector" id="ItemTypeSelector">
  <option value="Type1">Type1</option>
  <option value="Type2">Type2</option>
</select><br>

<select name="ItemSelector" id="ItemSelector">
  <option value="Type1Item1" class="Type1">Type1Item1</option>
  <option value="Type1Item2" class="Type1">Type1Item2</option>
  <option value="Type1Item3" class="Type1">Type1Item3</option>
  <option value="Type2Item1" class="Type2">Type2Item1</option>
  <option value="Type2Item2" class="Type2">Type2Item2</option>
  <option value="Type2Item3" class="Type2">Type2Item3</option>
</select><br>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。