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

Question

我有 6 个不同的元素:

Type1Item1
Type1Item2
Type1Item3

Type2Item1
Type2Item2
Type2Item3

两种不同的类型:

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 demo

将允许用户选择 Type2 和 Type1Item3 没有意义，因为 Type1Item3 属于 Type1 类型.

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

Answer 1

将 select 与 optgroup 一起使用可能是一个可行且简单的解决方案:

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

阅读更多 here