jquery – 计数选择下拉列表中的选项数(同一页上的多个)

我试图在选择下拉列表中输出选项数,但同一页上有多个选项.

例如：

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

任何帮助谢谢！

解决方法

使用选择器“.drop选项”将获得类“.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”>的元素子元素,使用子选择器&gt ;:

$('.drop > option');

要单独选择每个选择的选项数量,您可以选择< select>然后再为每一个计数.你可以这样做：

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);
});

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

好的,几乎有！再次感谢您的时间在这…

我已经把代码放在了,它正在做我想做的事情,但是由于这一切都在手风琴中,因此每个手风琴项目都会循环播放.看屏幕截图(借口造型)：

我只需要它现在只循环在手风琴的选择下降,而不是每一个.

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

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

javascript也在计数.那么有什么办法可以把一个-1放在这个结果中,还是有更好的方法来做到这一点我失踪了？

再次感谢…