HTML | DOM OptionGroup 对象

在 HTML 表单中，可以使用 <optgroup> 标签来将相似的选项分组。

在 DOM 中，<optgroup> 元素可以用 OptionGroup 对象来表示。

OptionGroup 对象

OptionGroup 对象用于表示 <optgroup> 元素，它继承自 HTMLOptGroupElement 接口，包含了所有的属性和方法。

属性

• disabled: 返回或设置一个布尔值，指示是否禁用当前选项组。
• label: 返回或设置当前选项组的标签。
• options: 返回当前选项组中所有的 <option> 元素，作为 HTMLCollection 对象。

方法

• add(option[, before]): 将一个 <option> 元素添加到当前选项组中。如果指定了 before 参数，则在该 <option> 元素之前添加。
• remove(index): 从当前选项组中移除指定位置的 <option> 元素。

示例

<form>
  <label for="fruit">水果选择：</label>
  <select name="fruit" id="fruit">
    <optgroup label="柑橘类">
      <option value="orange">橙子</option>
      <option value="lemon">柠檬</option>
      <option value="lime">酸橙</option>
    </optgroup>
    <optgroup label="浆果类">
      <option value="strawberry">草莓</option>
      <option value="blueberry">蓝莓</option>
      <option value="raspberry">覆盆子</option>
    </optgroup>
  </select>
</form>

const selectElement = document.getElementById('fruit');
const citrusGroup = selectElement.children[0];
const options = citrusGroup.options;
console.log(options.length); // 3

const appleOption = new Option('苹果', 'apple');
citrusGroup.add(appleOption);
console.log(options.length); // 4

citrusGroup.remove(3);
console.log(options.length); // 3

以上示例中，我们创建了一个包含两个选项组的下拉菜单，演示了如何使用 OptionGroup 对象来获取选项组的标签，以及向选项组中添加或删除 <option> 元素。