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

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

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

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

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

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

使用 Option 的 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.