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

在本教程中，我們將學習如何使用JavaScript顯示下拉列表中選定的選項。

什麼是下拉列表？下拉列表是一個可切換的選單，允許使用者從各種選項中選擇一項。

下拉列表使用<select></select>標籤生成，最常用於表單中收集使用者輸入。提交表單後，name屬性必須引用表單的資料。

可以使用DOM API函式getElementById()和querySelector()選擇<select>元素。該過程使用querySelector()函式首先選擇“按鈕”和“選擇”元素。然後，當單擊按鈕時，可以使用JavaScript顯示選定的索引。為按鈕附加一個點選事件監聽器。

現在讓我們看看在下拉列表中顯示所選選項的方法。

使用選項的selectedIndex屬性

在本節中，我們將學習如何使用selectedIndex屬性獲取下拉列表中的所選選項。selectedIndex屬性返回當前選定元素在下拉列表中的索引。如果沒有選中任何選項，則此索引（從0開始）將返回-1。

options屬性收集選擇下拉列表中的所有選項項。元素的順序由頁面的原始碼確定。要檢索指定的元素，請使用此屬性和之前找到的索引。可以使用此選項的value屬性來確定其值。

語法

請按照以下語法使用selectedIndex屬性。

selectelEment[selectElement.selectedIndex].value

這裡，selectedIndex是selectElement的索引，value屬性返回所選元素的值。

示例

在下面的示例中，我們有一個表單標籤。select標籤包含在form標籤內的多個選項。select標籤有一個onchange()事件，當用戶從下拉列表中選擇一個選項時，將執行一個函式。在這個函式中，我們使用分配給每個標籤的name屬性在表單標籤內選擇select標籤。

然後，從元素陣列中獲取這些元素的selectedIndex並顯示其值。此值將顯示在可用的空DOM的innerHTML中。

<html>
<head>
   <title>Program to dispaly the selected options in a dropdown list</title>
</head>
<body>
   <h2>Using the <i>selectedIndex</i> property.</h2>
   <form name="dropForm">
      <select name="dropSelect" onchange="showDropInfo()">
         <option value="P">Select:</option>
         <option value="A">Option 1</option>
         <option value="B">Option 2</option>
         <option value="C">Option 3</option>
      </select>
   </form>
   <p id="pF"></p>
   <p id="pS"></p>
   <p id="pT"></p>
   <script>
      function showDropInfo() {
         var sT = dropForm.dropSelect;
         var pF = document.getElementById('pF');
         var pS = document.getElementById('pS');
         var pT = document.getElementById('pT');
         pF.innerHTML = ('Selected option index: ' + sT.selectedIndex);
         pS.innerHTML = ('Selected value: ' + sT[sT.selectedIndex].value);
         pT.innerHTML = ('Selected text: ' + sT[sT.selectedIndex].text);
      }
   </script>
</body>
</html>

使用value屬性

在本節中，我們將學習如何使用value屬性獲取下拉列表中的所選選項。可以使用所選元素上的value屬性來確定所選元素的值。此屬性返回與列表的“option”元素的value屬性對應的字串。如果沒有選擇任何選項，則不會返回任何內容。

語法

selectElement.value

在上面的語法中，selectElement.value返回選項選單中所選選項的文字值。

演算法

  • 步驟1 - 建立一個帶有多個選項的select標籤，併為select標籤分配一個id。

  • 步驟2 - 同樣，建立一個帶有id的空DOM來顯示輸出。

  • 步驟3 - 讓使用者有一個按鈕元素來點選並檢視所選選項。

  • 步驟4 - 讓使用者從下拉列表中選擇一個選項。

  • 步驟5 - 使用查詢選擇器獲取所選值並將其顯示給使用者。

示例

在這個例子中，我們建立了一個帶有幾個選項的select標籤。有一個DOM來顯示輸出，還有一個按鈕元素供使用者呼叫選項選擇函式。當用戶點選此按鈕時，相應的DOM將使用查詢選擇器和value選項在下拉列表中顯示所選值。

<html>
<body>
   <h2>Using the <i>value</i> property</h2>
   <p>Select an option:
      <select id="s1">
         <option value="green">Green</option>
         <option value="blue">Blue</option>
         <option value="purple">Purple</option>
      </select>
   </p>
   <p>Selected option value :
      <span class="op"></span>
   </p>
   <button onclick="selOpt()">Option check</button>
   <script type="text/javascript">
      function selOpt() {
         selEl = document.querySelector('#s1');
         op = selEl.value;
         document.querySelector('.op').textContent = op;
      }
   </script>
</body>
</html>

在本教程中，我們學習了使用兩種方法在下拉列表中顯示所選選項。

使用selectedIndex的方法有點複雜，因為它從options陣列中過濾值。使用querySelector或document.getElementById的方法更有用，因為它直接獲取值。

更新於：2023年9月12日

31K+ 瀏覽量

啟動您的職業生涯

完成課程獲得認證

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