6

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

我开始研究 .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 上它永远不会隐藏任何选项。

4

3 回答 3

4

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

alert($('#selContactLists option:not([style*=none])').length);
于 2012-08-14T16:24:25.613 回答
3

使用 jQuery 的:visible选择器。

$('#selContactLists option:visible').length;
于 2012-08-14T14:41:43.900 回答
1

一种似乎有效的方法如下，尽管它通过将隐藏和显示的选项分配给变量然后使用.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 小提琴演示。

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

于 2012-08-14T16:25:29.580 回答