如何给一个下拉选项进行分组？

在前端开发中，给下拉选项（通常使用 <select> 元素）进行分组通常是通过使用 <optgroup> 标签来实现的。<optgroup> 标签用于对 <select> 元素中的 <option> 元素进行分组。你可以为每个 <optgroup> 标签设置 label 属性，以指定该组的标题。

以下是一个简单的示例，展示如何使用 <optgroup> 对下拉选项进行分组：

<select>
  <optgroup label="水果">
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橙子</option>
  </optgroup>
  <optgroup label="蔬菜">
    <option value="carrot">胡萝卜</option>
    <option value="tomato">西红柿</option>
    <option value="potato">土豆</option>
  </optgroup>
</select>

在这个示例中，我们创建了一个包含两个选项组的下拉列表。第一个选项组的标题是“水果”，包含三个选项：苹果、香蕉和橙子。第二个选项组的标题是“蔬菜”，也包含三个选项：胡萝卜、西红柿和土豆。

用户在下拉列表中选择选项时，会看到这些选项按组进行组织，每个组都有一个标题。这有助于提高用户界面的清晰度和易用性。