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

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>一个选项,然后为每个选项计数.你可以这样做:

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

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

好的,差不多了!再次感谢您的时间......

我已经把代码,它是做什么的我想要它做的,但由于它是在所有的手风琴,它为每个手风琴项目每次循环.看截图(借口样式):

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

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

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

JavaScript也在计算这个.那么有没有什么方法可以在结果中加一个-1,或者有更好的方法来做到这一点我错过了？

再次感谢...