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>

輸出：