附加列表项计数jQuery

时间:2012-08-29 16:20:01

标签: jquery printing count append populate

我使用它来填充列表,具体取决于多个选择框的值:

$(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;

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

3 个答案:

答案 0 :(得分:0)

可以这样做

    $(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 here sek转换为Jquery

$(sel).length;

答案 1 :(得分:0)

我会创建一个元素并将值放在那里,如下所示:

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

答案 2 :(得分:0)

可能你想要这样的东西

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

DEMO