Question

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

我开始研究.size（）和.length，但只获得完整列表而不是那些未隐藏的列表。为了简化，我已经改变它以尝试找到隐藏的选项（我可以使用：不是以后）。

$('#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()方法，这是一个不区分大小写的搜索，并且还会将selectedIndex转移到第一个非隐藏选项（在Chromium中，这似乎是必需的，以便在键入时one显示时隐藏select t）。

计算列表中的选项数

3 个答案: