Zählen Sie die Anzahl der Optionen in einer Liste

Question

Ich versuche, die Anzahl der Optionen in einer Liste zu zählen. Einige der Optionen wurden jedoch aufgrund des in ein Eingabefeld eingegebenen Suchtextes ausgeblendet.

Ich begann mit der Suche nach .size() und .length, bekam aber nur die vollständige Liste und nicht die, die nicht versteckt waren. Um zu vereinfachen, habe ich es geändert, um zu versuchen, die versteckten Optionen zu finden (ich kann verwenden: nicht später).

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

Ich habe auch versucht: console.log ($ ('# selContactLists Option: versteckt')); Ich bekomme nie die Nummer, die ich erwarte. Kann jemand sehen, wo ich falsch liege?

Noch seltsamer ist, dass, wenn ich die "Größe" der Auswahl ändern, so dass mehr als ein Element standardmäßig angezeigt wird, auf Chrome nie eine der Optionen versteckt.

Answer 1

Dies funktioniert für mich, aber möchten Sie vielleicht die CSS-Anzeige manuell hinzuzufügen und zu entfernen: keine von den Elementen, statt ein-/ausblenden verwenden, aus Kompatibilitätsgründen ...

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

Answer 2

Verwenden Sie jQuerys :visible Selektor.

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

Answer 3

Ein Ansatz, der zu arbeiten scheint, ist die folgende, obwohl es betrügt, etwas, indem sie die Optionen zuweisen, die versteckt sind und gezeigt, auf Variablen und dann mit der .length Eigenschaft dieser Variablen:

$('#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.

Bitte beachten Sie, dass das oben genannte eine relativ große Umschreibung Ihres ursprünglichen Codes ist. Ich habe etwas Caching von Selektoren verwendet, um die Anzahl der Zugriffe auf das DOM von innerhalb der keyup Methode zu reduzieren, und derzeit wegen der .toLowerCase() Methoden ist dies eine Suche ohne Berücksichtigung der Groß- und Kleinschreibung, und verschiebt auch die auf die erste die nicht versteckten Optionen (in Chrom schien dies erforderlich zu sein, um one zu verbergen, während es in der select während der Eingabe t gezeigt wurde).