如何使用 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 的值以获取列表。
