HTML <optgroup>标记

HTML <optgroup>标记用于在<select>元素中创建选项分组。通过将选项分为不同的组，可以使选择列表更具有层次结构和可读性。

语法

<select>
  <optgroup label="Group 1">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
  </optgroup>
</select>

属性

• label: 指定选项组的标签。

示例

以下示例演示了如何使用<optgroup>标记创建一个包含两个选项组的选择列表：

<select>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="tomato">Tomato</option>
  </optgroup>
</select>

效果如下：

注意事项

• <optgroup>元素必须位于<select>元素中。
• <optgroup>元素一般会包含一个或多个<option>元素。
• 为每个<optgroup>指定一个唯一的label属性值，用于显示选项组的标题。
• <optgroup>标记可以嵌套使用，以创建更复杂的选择列表。

通过合理使用<optgroup>标记，可以提高选择列表的可读性和易用性。