计算选择下拉列表中的选项数量（同一页面上的多个）

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>

任何帮助表示赞赏！

Answer 1

使用选择器".drop option"将获得所有 下的option元素（不一定是直接子元素），具有类{{1 }}

请注意，这不仅对select元素有效，而且对此有效：

".drop"

要确保<div class="drop"> <select> <option>Item 1</option> <option>Item 2</option> <option>Item 3</option> </select> </div> $('.drop option').length // 3 个<option>元素为<select class="drop">个孩子，请使用子项选择器>：

$('.drop > option');

---

要单独获取每个选项的选项数量，您可以先选择<select>，然后再计算每个选项。你可以这样做：

var optionsArr = $('select.drop').map(function() {
                     return $(this).find('option:not(:disabled)').length;
                 }).toArray();

这将返回一个具有不同金额的数组：[1, 3]

<强> DEMO

---

要添加包含文本“3 date（s）available”的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);
});

///////////////////////

好的，差不多了！再次感谢您的时间......

我已将代码放入其中并且它正在执行我想要它执行的操作，但由于它全部在Accordion中，因此每次都为每个手风琴项循环。查看截图（借口样式）：

我现在只需要它来循环选择该手风琴中的选择，而不是每一个。

此外，在我的Select fro down中，我将第一个选项作为“已禁用”作为验证的一部分，以便用户在继续之前必须选择一个项目，例如：

<option disabled="disabled"></option>

javascript也在计算这个。那么有没有什么方法可以在结果中加上-1，或者有更好的方法可以做到这一点我不知道了吗？

再次感谢...

Answer 2

描述

您获得4，因为您的jQuery选择器会匹配您网页上的所有选项。

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

对于搜索引擎优化（例如），您最好选择不同的ID。 但您也可以使用其他jQuery选择器，如:eq()，:first，:last或其他。这取决于你想做什么。

样品

不同的ID

<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 Demonstration

：最后一个选择器

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

查看此jsFiddle Demonstration

更多信息

• jQuery Selectors

Answer 3

这非常容易，您只需从选项中获取长度值：选中，如下所示：

$（'。drop option：selected'）。length

我希望这很有用。

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类运行。