如何使用 JQuery 计算具有选定值的选择列表的数量？答案

【问题标题】：How do I count the number of select lists with selected values using JQuery?如何使用 JQuery 计算具有选定值的选择列表的数量？
【发布时间】：2013-12-20 22:44:29
【问题描述】：

我正在使用“测验”功能在当前 Rails 应用程序上创建移动版本。目前，此功能会计算您已回答的问题数。

function updateGroupProgressCounter($group){
 var count = $group.find('tr').has('input:checked').length;
 $group.parents('.carousel').find('.checkedCount').text( count);
}

我正在将单选按钮的输入更改为移动设备的选择框，并希望保留计数功能，但到目前为止还不能完全发挥作用。我试过了

var count = $group.find('tr').has('select option:selected').length;

但是给了我该组中的问题总数。任何帮助表示赞赏。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我会根据选择更改事件在行上切换一个类，然后计算这些行。

$('tr select').change(function(){
   $(this).closest('tr').toggleClass('answered', $(this).val()!='' );
});

toggleClass的第二个参数决定是否添加/删除。

然后得到总行数：

$('tr.answered').length

toggleClass() API Docs

另一种使用filter() 来计算具有价值的select 的方法

var number_answered=$('tr select').filter(function(){
      return $(this).val !='';
}).length

【讨论】：

这应该可以解决问题。我已经很方便地切换班级以确保他们做出了选择。我会和那个联系在一起。谢谢。

【解决方案2】：

您可能正在寻找这样的东西：

$("#boxes").on("change","input", function(){
    $("#total").val($("#boxes input:checked").length);  
});

玩转fiddle

【讨论】：

【解决方案3】：

考虑到选择列表的第一个元素的值为空（即“”）

所以代码是

var count = 0;
$group.find('tr select').each(function(){
   if(this.value.length)
     count++;
});

我知道这不是最好的方法。根据@charlietfl 的建议，根据选择添加和删除类并最终找到包含所需类的元素的长度将是更好的方法。

【讨论】：