计算列表中的选项数量

Question

我正在尝试计算列表中的选项数量。但是，由于在输入框中输入了搜索文本，一些选项已被隐藏。

我开始研究 .size() 和 .length 但只得到了完整的列表，而不是那些没有隐藏的。为了简化，我将其更改为尝试找到隐藏的选项（我可以使用 :not later）。

$('#txtListSearch').keyup(function(evt) {
    if($(this).val().length < 1) {
        $('#selContactLists option').show();
    } else {
        $('#selContactLists option:not(:contains("' + $(this).val() + '"))').hide();

        if($('#selContactLists').size()) {
            $('#selContactLists option:contains("' + $(this).val() + '")').first().attr('selected', 'selected');                
        } else {
        }
    }
    console.log($('#selContactLists option').filter(':hidden'));
});

我也试过：console.log($('#selContactLists option:hidden')); 我从来没有完全得到我期望的数字。谁能看出我哪里出错了？

更奇怪的是，如果我更改选择的“大小”以便默认显示多个项目，则在 chrome 上它永远不会隐藏任何选项。

Answer 1

这对我有用，但出于兼容性原因，您可能希望从元素中手动添加和删除 css display:none，而不是使用 show/hide...

alert($('#selContactLists option:not([style*=none])').length);

Answer 2

使用 jQuery 的 :visible 选择器。

$('#selContactLists option:visible').length;

Answer 3

一种似乎可行的方法是以下，尽管它通过将隐藏和显示的选项分配给变量然后使用这些变量的.length 属性来欺骗，但在某种程度上是作弊：

$('#txtListSearch').keyup(
    function(e) {
        var val = $(this).val().toLowerCase(),
            sel = $('#selContactLists');
        if (val.length < 1) {
            sel.find('option').show();
        }
        else {
            var shown = sel.find('option').filter(

                function() {
                    return $(this).text().toLowerCase().indexOf(val) !== -1;
                }).show().first().prop('selected',true),
                hidden = sel.find('option').filter(

                function() {
                    return $(this).text().toLowerCase().indexOf(val) == -1;
                }).hide();
            console.log(shown.length, hidden.length);
        }
    });​

JS Fiddle demo.

请注意，以上是对您原始代码的较大改写。我已经使用了一些选择器缓存来减少从 keyup 方法中访问 DOM 的次数，并且，目前，由于 .toLowerCase() 方法，这是一个不区分大小写的搜索，并且还移动了 @ 987654326@ 到第一个非隐藏选项（在 Chromium 中，这似乎是必需的，以便在输入 t 时在 select 中显示 one 时隐藏它）。