如何使用 JavaScript 顯示下拉列表中所選項的索引？

我們使用 JavaScript 中的 selectedIndex 屬性來顯示下拉列表中所選項的索引。我們使用下拉列表的 ID 透過 JavaScript 訪問該元素，然後呼叫 selectedIndex 來獲取下拉列表中所選項的索引。

下拉列表是使用者介面實用程式的重要組成部分。它是一個選項列表，使用者可以從中選擇一個或多個選項。然後收集對這些下拉列表的響應，使用者採取所需的行動。

下拉列表通常用於使用者有多個選項且需要選擇其中一個或多個的情況。

使用 selectedIndex 屬性

它是 JavaScript 文件物件模型中下拉列表的一個屬性。它包含 HTML 文件中下拉列表中所選項的索引。

索引從 0 開始。

語法

var index = document.getElementById("dropDownListId").selectedIndex;

我們首先使用其 ID “dropDownListId” 引用下拉列表，並將所選項的索引提取到變數 index 中。

讓我們來看一個例子以便更好地理解。

示例 1

在下面的程式碼片段中，我們有一個用於在表單中選擇 Windows 版本的下拉列表。使用者選擇所需的選項，然後單擊提交按鈕。然後，我們在 HTML 主體中顯示所選項的索引。

<!DOCTYPE html>
<html>
<body>
   <p> Which windows version do you use ? </p><br>
   <form id="myForm"> 
      <select id="selectNow">
         <option>Windows 11</option>
         <option>Windows 10</option>
         <option>Windows 8</option>
         <option>Windows 7</option>
         <option>Windows vista</option>
         <option>Windows XP</option>
         <option>Windows 2000</option>
         <option>Windows 98</option>
      </select> 
      <input type="button" onclick="display()" value="Submit !"> 
   </form>
   <p>Select and click the button to get the index of the selected option.<br></p>
   <div id="result"></div>
   <script>
      function display() {
         var index = document.getElementById("selectNow").selectedIndex;
         document.getElementById("result").innerHTML = "The selected index is :" + index;
      }
   </script>
</body>
</html>

提交按鈕觸發 display() 函式，該函式提取所選項的索引並在 HTML 主體中列印索引。

不僅可以提取索引，還可以使用value屬性提取所選選項的值。

var value = document.getElementById("dropDownListId").value;

我們首先使用其 ID 引用下拉列表，並將所選項的索引提取到變數 index 中。

讓我們來看一個例子以便更好地理解。

示例 2

在下面的程式碼片段中，我們將建立一個按鈕，該按鈕首先提取 HTML 文件中存在的所有連結的列表，然後迭代該列表以記錄 HTML 主體中的每個超連結。

<!DOCTYPE html>
<html>
<body>
   <p> Which windows version do you use ? </p><br>
   <form id="myForm"> 
      <select id="selectNow">
         <option>Windows 11</option>
         <option>Windows 10</option>
         <option>Windows 8</option>
         <option>Windows 7</option>
         <option>Windows vista</option>
         <option>Windows XP</option>
         <option>Windows 2000</option>
         <option>Windows 98</option>
         </select> 
      <input type="button" onclick="display()" value="Submit !"> 
   </form>
   <p>Select and click the button to get the index of the selected option.<br></p>
   <div id="result"></div>
   <script>
      function display() {
         var index = document.getElementById("selectNow");
         var resultDiv = document.getElementById("result");
         var text = "";
         text += "The selected option is :" + index.value;
         resultDiv.innerHTML = text;
      }
   </script>
</body>
</html>

提交按鈕觸發 display() 函式，該函式提取所選項的值並將其記錄在 HTML 主體中。

注意 - 如果沒有選擇任何選項，則返回的索引為 -1。

注意 -

但是，JavaScript 的 selectedIndex 功能有一些限制。

在多選下拉列表中，selectedIndex 只返回所選選項的第一個索引，因此我們為此提供了一種解決方法。

對於允許多選的下拉列表，我們使用對應下拉列表 JavaScript 物件的options屬性上的 for ... of 迴圈。對於每個選項，我們檢查其selected屬性是 true 還是 false。

讓我們用一個例子來更好地理解這一點 -

示例 3

在下面的程式碼片段中，我們有一個多選下拉列表，我們將建立一個按鈕，該按鈕首先提取下拉列表中所有選項的列表，然後迭代這些選項以檢查哪些選項被選中。

<!DOCTYPE html>
<html>
<body>
   <p> Which windows versions do you use? </p>
   <p> You can select multiple options. </p>
   <form id="myForm">
      <select id="selectNow" multiple>
         <option>Windows 11</option>
         <option>Windows 10</option>
         <option>Windows 8</option>
         <option>Windows 7</option>
         <option>Windows vista</option>
         <option>Windows XP</option>
         <option>Windows 2000</option>
         <option>Windows 98</option>
      </select>
      <input type = "button" onclick = "display()" value = "Submit">
   </form>
   <p>The selected options are : <div id = "result"> </div></p>
   <script>
      function display(){
         var options = document.getElementById("selectNow").options;
         var text = "";
         for(option of options){
            if(option.selected) text += option.value + "<br>";
         }
         document.getElementById("result").innerHTML = text;
      }
   </script>
</body>
</html>

提交按鈕觸發display() javascript 函式，該函式提取下拉列表中的所有選項並將其記錄在 HTML 主體中。

結論

文件物件的 selectedIndex 屬性對於接收使用者輸入然後提供合適的響應非常有用。

更新於：2022年9月21日

11K+ 次瀏覽

啟動您的 職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.