嵌套下拉列表 Select 输入

Question

是否可以仅使用 html 创建嵌套的 select 输入字段？

例如，我会有一个包含 4 个选项（类别）的下拉列表，但是这 4 个选项中的每一个都会在里面有另外 2 个选项（子类别）。

例如我要选择类别 1 -> 子类别项目 2

Answer 1

也许 <optgroup>?

请参阅下面的示例：

<label for="select">Choose your option</label>
<select id="select">
  <optgroup label="Category one">
    <option value="category-one__first-option">First option</option>
    <option value="category-one__second-option">Second option</option>
  </optgroup>
  <optgroup label="Category two">
    <option value="category-two__first-option">First option</option>
    <option value="category-two__second-option">Second option</option>
  </optgroup>
</select>

如果他们在 optgroup 中选择了一个选项，您就会知道他们选择了该类别。

嵌套下拉列表 Select 输入

Nested Dropdown Select Input

html

nested

dropdown

html-select