如何使用 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。

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

示例 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+ 瀏覽量

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告