jquery - 计算选择下拉列表中的选项数量(同一页面上有多个)

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类 ".drop" 的元素下(不一定是直接子元素)的元素.

请注意，这不仅对 select 元素有效，而且对以下元素也有效:

<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>首先，然后对每个 then 进行计数。您可以执行以下操作:

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

这将返回一个具有不同数量的数组:[1, 3]

<强> DEMO

<小时/>

要添加带有文本“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);
});

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

好的，快到了!再次感谢您抽出宝贵时间参与本次事件...

我已将代码放入其中，它正在执行我想要的操作，但是由于它全部位于 Accordion 中，因此每次都会循环每个 Accordion 项。请参阅屏幕截图(请原谅样式):

我现在只需要它只循环该 Accordion 中的选择下降，而不是每个循环。

此外，在我的“向下选择”中，我将第一个选项设置为“禁用”作为验证的一部分，以便用户必须在继续之前选择一个项目，例如:

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

JavaScript 也在计算这个。那么有什么方法可以将 -1 放入结果中，或者有没有更好的方法来做到这一点，而我却错过了？

再次感谢...