javascript - Jquery计数选择了一个项目的选择框

Question

我想知道是否有一种更有效的方法来计算用户的选择：

这是页面上多次出现的选择下拉菜单：

<select class="span2 jquery-countable" name="category[7]">
    <option></option>
    <option value="1">1. vote</option>
    <option value="2">2. vote</option>
    <option value="3">3. vote</option>
    <option value="4">4. vote</option>
</select>

这是我的 js 计算选择：

$(document).ready(function () {

    $('#selected-count').html('You choose ' + getCount() + ' entries');

    function getCount() {
        prio1 = $('.jquery-countable option:selected[value="1"]').length;
        prio2 = $('.jquery-countable option:selected[value="2"]').length;
        prio3 = $('.jquery-countable option:selected[value="3"]').length;
        prio4 = $('.jquery-countable option:selected[value="4"]').length;

        return prio1 + prio2 + prio3 + prio4;
    }

    $('.jquery-countable').change(function () {
        $('.jquery-countable option:selected').each(function () {
            $('#selected-count').html('You choose ' + getCount() + ' entries');
        })
    })
});

我的目标是计算用户所做的所有非空选择？！

有没有更有效的方法？

谢谢！

Answer 1

这将返回您希望的非空的选定项目的数量：

function getCount(){
   return $("select.jquery-countable option:selected[value!='']").length;
}

Answer 2

这是一种方法

$(document).ready(function () {

    $('#selected-count').html('You choose ' +0 + ' entries');



    $('.jquery-countable').change(function () {
        var count = 0;
        $('.jquery-countable').each(function () {
            if($.trim($(this).val()).length > 0)
                count++;
        });
        $('#selected-count').html('You choose ' +count + ' entries');
    })
});​

工作小提琴

Answer 3

尝试这样的事情

$("select").change(function(){           
   var count = $("select.jquery-countable option:selected[value!='']").length;
   console.log(count);
});

Answer 4

是的，只需关闭 [value=#] 即可。更通用的选择器将返回一个选定值的数组，在选择的情况下它应该只包含 1。

function getCount() {
    return $('.jquery-countable option:selected').length;
}

这将计算页面上“选定”选项的总数，这些选项位于带有 jquery-countable 类的选择中。