HTML | DOM 选项索引属性

在HTML表单中，选项元素通常使用<option>标签表示。<option>标签可以使用多个属性，其中一个是index属性，它定义了当前选项的索引值。在DOM中，我们可以使用selectedIndex属性来获取或设置当前选中选项的索引。

语法

index属性的语法如下：

<option index="index_value">Option Label</option>

selectedIndex属性的语法如下：

element.selectedIndex

工作原理

index属性定义了当前选项在选项列表中的索引值。索引值是一个非负整数，从0开始。如果未设置index属性，则索引将自动分配并从0开始。

使用selectedIndex属性可以获取或设置当前选中选项的索引。该属性的值是一个非负整数，从0开始。如果未选中任何选项，则该属性的值为-1。

例子

这是一个示例HTML代码段，显示了三个选项元素并分配了索引。

<select id="cars">
  <option index="0">Volvo</option>
  <option index="1">Saab</option>
  <option index="2">Mercedes</option>
</select>

我们可以使用selectedIndex属性来获取或设置当前选中选项的索引。

const cars = document.getElementById("cars");

// 获取当前选中的选项索引
const selected_index = cars.selectedIndex;

// 设置选中的选项为第二个选项
cars.selectedIndex = 1;

总结

index属性用于定义选项的索引值，可以在DOM中使用selectedIndex属性来获取或设置当前选中的选项索引。索引是从0开始的非负整数。