HTML | DOM 选项对象

HTML | DOM 选项对象是用于表示 HTML <select> 元素中的选项的 JavaScript 对象。该对象提供了一些属性和方法，使得可以通过 JavaScript 进行选项的操作和处理。

属性

1. index

选项在所属 <select> 元素中的索引位置。索引是从 0 开始的整数。

const option = document.querySelector("select").options[0];
console.log(option.index); // 0

2. value

选项的值。通常是显示给用户的选项文本，也可以是自定义的值。可以通过该属性修改选项的值。

const option = document.querySelector("select").options[0];
console.log(option.value); // "option-1"

option.value = "new-value";
console.log(option.value); // "new-value"

3. text

选项的文本内容。可以通过该属性修改选项的文本内容。

const option = document.querySelector("select").options[0];
console.log(option.text); // "Option 1"

option.text = "New Option";
console.log(option.text); // "New Option"

4. selected

表示选项是否被选中。可以通过该属性修改选项的选中状态。

const option = document.querySelector("select").options[0];
console.log(option.selected); // true

option.selected = false;
console.log(option.selected); // false

5. disabled

表示选项是否被禁用。禁用的选项在下拉列表中无法被选择。

const option = document.querySelector("select").options[0];
console.log(option.disabled); // false

option.disabled = true;
console.log(option.disabled); // true

6. label

选项的标签。标签通常用于给选项分组或提供额外的描述信息。

const option = document.querySelector("select").options[0];
console.log(option.label); // ""

option.label = "Group A";
console.log(option.label); // "Group A"

方法

1. remove()

从所属 <select> 元素中移除该选项。

const option = document.querySelector("select").options[0];
option.remove();

2. add(option, before)

向所属 <select> 元素中添加一个新的选项。option 参数为要添加的选项元素，before 参数为一个可选参数，表示将新选项插入到指定选项之前。如果不传递 before 参数，则将新选项添加到末尾。

const select = document.querySelector("select");
const option = document.createElement("option");
option.text = "New Option";

select.add(option);

以上就是 HTML | DOM 选项对象的一些常用属性和方法。通过这些属性和方法，程序员可以很方便地使用 JavaScript 操作和处理 HTML <select> 元素中的选项。