JavaScript 中的 selectedIndex 属性

本文将使用 JavaScript 的 selectedIndex 属性处理 select 元素索引。

使用 JavaScript 中的 selectedIndex 属性获取 select 元素的索引

select 是一个 HTML 元素，可让你创建下拉列表。这个 HTML 元素可以有各种 option 元素作为子元素。

select 元素有一个 selectedIndex 属性，允许你从下拉列表中设置或返回选定的选项索引。索引值从零开始。

如果你从下拉列表中选择多个选项，那么在这种情况下，它将返回索引作为列表中的第一个元素。

在本节中，我们将看到如何获取所选元素的索引值。我们将使用 selectedIndex 属性。

首先，在 HTML 中，我们将创建一个 select 元素。在这个 select 元素上，我们将设置一个 dropdown 的 id 和一个单击侦听器，一旦用户单击它，它将调用函数 setSelectedIndex()。

select 包含带有一些值的各种 option 元素。

<select id="dropdown" onclick="setSelectedIndex()">
    <option>Google</option>
    <option>Microsoft</option>
    <option>Apple</option>
    <option>Netflix</option>
    <option>Meta</option>
</select>

我们将在 JavaScript 文件中定义 setSelectedIndex() 函数。setSelectedIndex() 函数旨在返回用户从下拉列表中选择的元素的索引。

我们首先必须使用它的 id 获取 select 元素的引用，然后将 selectedIndex 属性添加到它。然后我们将结果存储在变量 x 中，然后在控制台上打印该值。

<script>
    function setSelectedIndex() {
        var x = document.getElementById("dropdown").selectedIndex;
        console.log(x)
    }
</script>

输出：