jquery - 追加列表项计数jQuery

Question

我正在使用它来根据多个选择框的值填充列表：

$(document).ready(function() {
    $("select").change(function() { // <-- bind change event handler to the drop downs
        var sel = "";
        $(".option-select option:selected").each(function() { // <-- then iterate each time it changes   
            if ($(this).index() !== 0) { // <-- only if not default
                sel += "<li>" + $(this).text() + "</li>";
            }
            $("ul.result ul").empty().append(sel); //<-- empty() to remove old list and update with new list
        });
    });
});​

但是，我不知道如何打印添加到列表中的选项数量，或选择值的选择框数量。我需要告诉用户他们选择了多少选项，并像我一样显示这些选项。我发现如何使用以下方法计算列表中的项目数：

var count = $("ul li").length;

但无法弄清楚如何打印这个计数。

Answer 1

也许你想要这样的东西

$(document).ready(function() {
    $("select").change(function() {
        var list=$(this).children(':selected').not($(this).children()[0]);
        $('#result, #count').empty();
        if(list.length){
            list.each(function(){
                $('<li></li>').val($(this).val()).text($(this).text())
                .appendTo($('#result'));
                $('#count').html(list.length);
            });
        }
    });
});

演示。

Answer 2

可以这样做

    $(document).ready(function() {
    $("select").change(function() { // <-- bind change event handler to the drop downs
        var sel = "";
        var counter = 0;
        $(".option-select option:selected").each(function() { // <-- then iterate each time it changes   
            if ($(this).index() !== 0) { // <-- only if not default
            {
                sel += "<li>" + $(this).text() + "</li>";
                counter++;
            }
            }    
            $("ul.result ul").empty().append(sel); //<-- empty() to remove old list and update with new list
        });
    });

//The Number of Option's Added
counter;

或者只是将enter code heresel 转换为 Jquery

$(sel).length;

Answer 3

我会制作一个元素并将值放在那里，如下所示：

<div id="count_holder">You have <span></span> options</div>
<script>
    $("#count_holder").find("span").text(count);
</script>