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')); 思ったほどの数字は出ません。誰かが私が間違っているところを見ることができますか?

さらに奇妙なことに、デフォルトで複数のアイテムが表示されるように選択の「サイズ」を変更すると、クロムではオプションが非表示になりません。

4

3 に答える 3

4

これは私にとってはうまくいきますが、互換性の理由から、表示/非表示を使用する代わりに、css display:none を要素から手動で追加および削除することをお勧めします...

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機能しているように見える 1 つのアプローチは次のとおりです。ただし、非表示および表示されるオプションを変数に割り当て、それらの変数のプロパティを使用することで、多少ごまかすことができます。

$('#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 フィドルのデモ。

上記は、元のコードを比較的大幅に書き直したものであることに注意してください。メソッド内から DOM にアクセスする回数を減らすために、セレクターのキャッシュをいくつか使用しましたkeyup。現在、.toLowerCase()メソッドのために、これは大文字と小文字を区別しない検索でありselectedIndex、非の最初の検索にシフトします。非表示オプション (Chromium では、入力中oneに表示されている間に非表示にするために必要なようです)。selectt

于 2012-08-14T16:25:29.580 に答える