数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 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 的值以获取列表。
9K+ 浏览量
