如何使用 JavaScript 獲取下拉列表中的選項數量？

本教程將展示使用 JavaScript 獲取下拉列表中選項數量的不同方法。

在填寫任何線上表單時，使用者必須使用輸入方法新增唯一資訊。但是，他們在下拉列表中獲得的選項已確定。由於下拉列表中提到的選項可能有限，因此您可能需要使用 JavaScript 檢查數量。

使用 options.length 方法獲取下拉選項的數量

獲取選項列表的一種簡單方法是透過其 ID 獲取列表。我們將使用 document.getElementById() 方法來選擇列表。然後，透過使用 .options.length 方法，我們將獲取下拉列表的數量。

語法

在此語法中，我們將使用 <select> 標籤的 id 和 .options.length 方法來確定下拉列表中建立了多少個選項。

var list = document.getElementById("dropdown");
drop.innerHTML = list.options.length;

演算法

  • 步驟 1 - 在文件中使用 <select> 標籤建立一個下拉列表。

  • 步驟 2 - 在列表中使用 <option> 標籤新增 2-3 個選項，如示例所示。

  • 步驟 3 - 在 JavaScript 中，使用 document.getElementById() 方法訪問 <select> 標籤。

  • 步驟 4 - 使用 .options.length 和 innerHTML 獲取下拉列表中建立的選項數量。

示例

檢視下面的示例以瞭解在 HTML 文件中建立下拉列表的最佳方法。我們使用 <select> 標籤的 id 和 .options.length 方法獲取建立的選項數量。

<html>
<body>
   <h2>Using <i>options.length method</i> to get the number of options</h2>
   <select id = "dropdown">
      <option>French</option>
      <option>English</option>
      <option>Español</option>
   </select>
   <p id = numdrop></p>
</body>
   <script>
      var list = document.getElementById("dropdown");
      let drop = list.options.length + " options";
      document.getElementById('numdrop').innerHTML = drop;
   </script>
</html>

使用 .querySelectorAll() 方法獲取下拉選項的數量

由於選項是使用文件中的 <options> 標籤建立的，因此您也可以使用 .querySelectorAll() 方法來訪問長度和值。

語法

我們將遵循以下語法來獲取新增到下拉列表中的選項數量。

drop.innerHTML = document.querySelectorAll('option').length;

示例

這裡我們沒有為 <select> 標籤建立任何 id。我們將使用 JavaScript 中的 querySelectorAll() 方法來獲取選項的數量。然後，只需使用 .length 和 innerHTML 方法獲取輸出。

<html>
<body>
   <h2>Using <i>.querySelectorAll() method</i> to get the number of options</h2>
   <select>
      <option>French</option>
      <option>English</option>
      <option>Español</option>
   </select>
   <p id = num></p>
</body>
   <script>
      var drop = document.querySelectorAll('option').length;
      document.getElementById('num').innerHTML = drop;
   </script>
</html>

使用增量運算子獲取下拉選項的數量

使用增量運算子獲取選項的數量是最常見的，因為它允許您更改輸出。您可以檢視示例以瞭解增量方法如何以及多個下拉選項以及文字一起提供所需的輸出。

語法

在此語法中，我們已使用其 id 獲取了 <select> 標籤。然後，我們使用增量運算子獲取了下拉選項的數量和文字。您可以透過將 i 的值從 0 更改為 1 或 2 來更改輸出。

a = document.getElementById("dropdown");
options = "";
for (i = 0; i < a.length; i++) {
   options = options + a.options[i].text;

示例

這裡我們使用 JavaScript 中的增量運算子獲取了下拉選項的數量和選項的文字。

<html>
<body>
   <h2>Using <i>Increment Operators</i> to get the No. of options</h2>
   <select id = "list">
      <option>French</option>
      <option>English</option>
      <option>Español</option>
   </select>
   <p id = num></p>
</body>
   <script>
      var a, i, options;
      a = document.getElementById("list");
      options = "";
      for (i = 0; i < a.length; i++) {
         options = options + "<br> " + a.options[i].text;
      }
      document.getElementById('num').innerHTML = a.length + " Dropdown Options: " + options;
   </script>
</html>

雖然使用 .length 方法獲取選項的數量可以立即給出輸出，但您可以使用增量運算子來自定義 JavaScript 中的輸出。例如，如果您想檢查最近從包含 100 多個選項的下拉列表中新增的選項，您可以更改 i 的值以獲取列表。

更新於： 2022-08-26

9K+ 瀏覽量

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告