HTML DOM Optgroup 对象

<optgroup> 元素用于将 <option> 元素进行分组，使得 <select> 元素中的选项更加有组织和结构化。一个 <optgroup> 元素可以包含多个 <option> 元素，这些 <option> 元素将被视为属于该 <optgroup>。

语法

// www.javascriptcn.com code example
<select>
  <optgroup label="Group 1">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </optgroup>
</select>

在上面的示例中，我们创建了一个包含两个分组的 <select> 元素。第一个分组包含两个选项，分组的标签是 "Group 1"；第二个分组包含两个选项，分组的标签是 "Group 2"。

属性

• label：指定分组的标签，用于显示在 <select> 元素的下拉列表中，必须设置。

示例代码

// www.javascriptcn.com code example
<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="broccoli">Broccoli</option>
  </optgroup>
</select>

在上面的示例中，我们创建了一个包含两个分组的 <select> 元素。第一个分组包含两个水果选项，分组的标签是 "Fruits"；第二个分组包含两个蔬菜选项，分组的标签是 "Vegetables"。