在一个下拉选择框中计算选项的数量（同一页上有多个下拉选择框）

Question

我试图输出一个下拉选择框中选项的数量，但是同一页上有多个下拉选择框。

例如:

<select name="select" class="drop">
   <option name="option" value="Option 1"></option>
</select>

<select name="select" class="drop">
   <option name="option" value="Option 1"></option>
   <option name="option" value="Option 2"></option>
   <option name="option" value="Option 3"></option>
</select>

所以第一个将输出（1），第二个将输出（3）。 我有这段代码，但它输出（4）- 计算所有选择选项的总数。

<script type="text/javascript">
$(function() {
   $(".date_number").text($(".drop option").length + " items");
});
</script>

非常感谢任何帮助！

- Matt Price

---

在你的示例中，.date_number 元素在哪里？你是如何决定所指的 select 的？ - U-DON

你到底想要什么？如果你想计算你选择的选项，你可以创建一个循环并加上你的选项。 - Ali U

Answer 1

使用选择器".drop option"可以获取具有类名".drop"的元素下所有非直接子元素的option元素，需要注意的是，这不仅适用于元素，也适用于其他元素。<div class="drop"> <select> <option>Item 1</option> <option>Item 2</option> <option>Item 3</option> </select> </div> $('.drop option').length // 3 为了确保您的<select class="drop">元素的子元素是<option>，请使用子元素选择器>: $('.drop > option'); 要分别获取每个选择框的选项数量，您需要先选择<select>元素，然后计算每个元素的选项数。您可以使用以下代码实现： 要分别获取每个选择框的选项数量，您需要先选择<select>元素，然后计算每个元素的选项数。您可以使用以下代码实现：var optionsArr = $('select.drop').map(function() { return $(this).find('option:not(:disabled)').length; }).toArray(); 这将返回一个包含不同数量的数组: [1, 3] 演示 要添加一个带有文本“3个日期可用”的div，请执行以下操作：$('select.drop').each(function() { // the current select.drop var $this = $(this); // create a div with the text you want $('<div>' + $this.find('option:not(:disabled)').length + ' date(s) available</div>') // append it after the current select.drop .insertAfter($this); }); /////////////////////// 好的，差不多了！再次感谢您抽出时间来做这件事…… 我已经将代码放入其中并且它正在按照我想要的方式运行，但由于它全部都在手风琴中，所以对于每个手风琴项，它都会循环一次。参见截图（抱歉样式）： 现在我只需要让它仅针对该手风琴中的选择下拉列表循环，而不是每个手风琴。 此外，在我的下拉列表框中，我将第一个选项设置为“禁用”，作为验证的一部分，以便用户在继续之前必须选择一个项目，例如：<option disabled="disabled"></option> JavaScript也会计算这个。那么有没有办法将结果减去1，或者我错过了更好的方法？再次感谢...

- Didier Ghys

---

非常感谢这个……它可以输出值作为警报，但是，我该如何将这些值放入div中进行显示？基本上，选择下拉列表是每个事件类别可用日期的列表，我想在每个类别旁边写上“有3个日期可用”或“有1个日期可用”，具体取决于每个选项中有多少。感谢您的时间！ - Matt Price

PS...我无法为选择下拉菜单设置单独的ID，因为它们是由CMS动态创建的，而不是硬编码的。 - Matt Price

好的...我已经接受了你的答案。谢谢。如果你能给我停止循环它们所有的一点代码，那就太好了。我可以自己想出其余部分，但我卡在这一点上了！谢谢 - Matt Price

我没有看到你的手风琴代码，所以很难给出确切的答案。但是对于禁用选项，你可以使用$this.find('option:not(:disabled)').length。另外，编辑帖子时请小心，你把我的 jsfiddle 链接删除了。 - Didier Ghys

好的，谢谢...我一直在尝试使用.next方法，但是无法弄清楚如何将其放入我想要的div中。我会继续寻找并最终成功的！再次感谢您的时间。 - Matt Price

Answer 2

这很简单，你只需要从选定的选项中获取长度值，就像这样：

$('.drop option:selected').length

希望这对你有用。

- Suissa

---

这将不会计算选择框中的选项数量。 - AMember

将计算所选选项的数量，抱歉我觉得我没有理解问题。 - Suissa

Answer 3

描述

你得到了4，因为你的jQuery选择器匹配了页面上所有选项。

基本问题是，你想计算哪个select？

最好的方法是给不同的selects分配不同的id，以进行搜索引擎优化（例如）。但是你也可以使用其他jQuery选择器，比如:eq()，:first，:last或其他等等。这取决于你想要做什么。

示例

不同的IDs

<select id="select1" name="select" class="drop">
   <option name="option" value="Option 1"></option>
</select>

<select id="select2" name="select" class="drop">
   <option name="option" value="Option 1"></option>
   <option name="option" value="Option 2"></option>
   <option name="option" value="Option 3"></option>
</select>

<span class="date_number"/>

$(function() {
  $(".date_number").text($("#select2 option").length + " items")
});

请查看这个 jsFiddle演示

:last选择器

$(function() {
    $(".date_number").text($(".drop:last option").length + " items")
});

查看这个jsFiddle演示

更多信息

• jQuery选择器

- dknaack

Answer 4

由于您没有为每个选择器设置唯一的ID，因此您需要执行以下操作：

$('.drop').text( function(){
  console.log($(this).select('option').length);
  // instead of console.log return the text you want
  // return $(this).select('option').length + " items";
});

这段代码的作用是对于每个 .drop 类，运行定义的函数。该函数是查找所有在 $(this) 范围内的元素。$(this) 是当前的 .drop 类元素。

而 $('.drop') 将会运行于它找到的每一个 .drop 类。

- redronin

---

感谢您的回复。我该如何将返回值显示在手风琴内的一个定位div中？ - Matt Price