Conteggio del numero di tag di opzione in un tag di selezione in jQuery


159

Come posso contare il numero di <option>s in un <select>elemento DOM usando jQuery?

<select data-attr="dropdown" id="input1">
  <option value="Male" id="Male">Male</option>
  <option value="Female" id="Female">Female</option>
</select>

Voglio trovare il numero di <option>tag nell'elemento <select>DOM, poiché con ciò voglio aprire il pannello delle impostazioni con quel numero di campi di input con il corrispondente valore di opzione dalla casella a discesa in esso e modificarlo di nuovo nell'anteprima pannello.

La casella a discesa sopra è nel mio pannello di anteprima che è generato da jQuery.

Risposte:



51

La soluzione W3C:

var len = document.getElementById("input1").length;

5
Una variante a questo metodo con il moderno javascript sarà var len = document.querySelector("#input1").length;
Jacob Nelson,

22

È possibile utilizzare entrambe le proprietà length ed lengthè quindi una prestazione migliore size.

$('#input1 option').length;

O puoi usare la funzione size come

$('#input1 option').size(); 

dimostrazione


2
Questo non fornisce nulla che le risposte del 2009 non abbiano fornito.
TylerH,

18

La tua domanda è un po 'confusa, ma supponendo che tu voglia visualizzare il numero di opzioni in un pannello:

<div id="preview"></div>

e

$(function() {
  $("#preview").text($("#input1 option").length + " items");
});

Non sono sicuro di aver capito il resto della tua domanda.


14

In una casella di selezione multipla, è possibile utilizzare $('#input1 :selected').length;per ottenere il numero di opzioni selezionate. Questo può essere utile per disabilitare i pulsanti se non viene raggiunto un certo numero minimo di opzioni.

function refreshButtons () {
    if ($('#input :selected').length == 0)
    {
        $('#submit').attr ('disabled', 'disabled');
    }
    else
    {
        $('#submit').removeAttr ('disabled');
    }
}

Ho scoperto che funziona dopo aver rimosso le parentesi graffe a $('#input1 :selected').length; supporto della documentazione api.jquery.com/length
Leonard Kakande

6

Ok, ho avuto qualche problema perché ero dentro a

$('.my-dropdown').live('click', function(){  
});

Avevo multipli nella mia pagina, ecco perché ho usato un corso.

Il mio menu a discesa è stato compilato automaticamente da una richiesta Ajax quando l'ho fatto clic, quindi avevo solo l'elemento $ (questo)

così...

Ho dovuto fare:

$('.my-dropdown').live('click', function(){
  total_tems = $(this).find('option').length;
});

6

La forma migliore è questa

$('#example option').length

Questa soluzione di solo codice (di basso valore) è stata fornita 4 anni prima da Sadikhasan. L'uso di è lengthstato pubblicato da Karim79 9 anni prima. Questa risposta può essere tranquillamente eliminata dalla pagina in quanto è completamente ridondante.
Mickmackusa,

-1

Un altro approccio che può essere utile.

$('#select-id').find('option').length

1
La domanda non richiede il conteggio dei soli messaggi selezionati <option> .
user4642212
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.