Zliczanie liczby tagów opcji w tagu select w jQuery

159

Jak policzyć liczbę <option>sw <select>elemencie DOM za pomocą jQuery?

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

Chcę znaleźć liczbę <option>tagów w <select>elemencie DOM, ponieważ za pomocą tego chcę otworzyć panel ustawień z taką liczbą pól wejściowych z odpowiednią wartością opcji z listy rozwijanej w nim i zmienić ją ponownie w podglądzie płyta.

Powyższa lista rozwijana znajduje się w moim panelu podglądu, który jest generowany przez jQuery.

Łaska
źródło

Odpowiedzi:

263
$('#input1 option').length;

To wyprodukuje 2.

słowik2k1
źródło
51

Rozwiązanie W3C:

var len = document.getElementById("input1").length;
karim79
źródło
5
Odmianą tej metody we współczesnym javascript będzie var len = document.querySelector("#input1").length;
Jacob Nelson
22

Możesz użyć dowolnej właściwości length i wtedy lengthjest lepsza wydajność size.

$('#input1 option').length;

LUB możesz użyć funkcji rozmiaru, takiej jak

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

Próbny

Sadikhasan
źródło
2
To nie dostarcza niczego, czego nie dostarczyły odpowiedzi z 2009 roku.
TylerH,
18

Twoje pytanie jest trochę zagmatwane, ale zakładając, że chcesz wyświetlić liczbę opcji w panelu:

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

i

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

Nie jestem pewien, czy rozumiem resztę Twojego pytania.

cletus
źródło
14

W polu opcji wielokrotnego wyboru możesz użyć, $('#input1 :selected').length;aby uzyskać liczbę wybranych opcji. Może to być przydatne do wyłączania przycisków, jeśli pewna minimalna liczba opcji nie jest spełniona.

function refreshButtons () {
    if ($('#input :selected').length == 0)
    {
        $('#submit').attr ('disabled', 'disabled');
    }
    else
    {
        $('#submit').removeAttr ('disabled');
    }
}
Philip
źródło
Okazało się, że to działa po usunięciu szelek $('#input1 :selected').length; wspierających dokumentację api.jquery.com/length
Leonard Kakande
6

Ok, miałem kilka problemów, ponieważ byłem w środku

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

Miałem wielokrotności na mojej stronie, dlatego użyłem klasy.

Moje rozwijane menu zostało wypełnione automatycznie przez żądanie Ajax, kiedy je kliknąłem, więc miałem tylko element $ (this)

więc...

Musiałem zrobić:

$('.my-dropdown').live('click', function(){
  total_tems = $(this).find('option').length;
});
workdreamer
źródło
6

Najlepsza forma jest taka

$('#example option').length
Ricardo López García
źródło
To rozwiązanie zawierające tylko kod (o niskiej wartości) zostało dostarczone 4 lata wcześniej przez Sadikhasan. Korzystanie z usługi lengthzostało opublikowane przez Karim79 9 lat wcześniej. Tę odpowiedź można bezpiecznie usunąć ze strony, ponieważ jest ona całkowicie zbędna.
mickmackusa
-1

Inne podejście, które może być przydatne.

$('#select-id').find('option').length
zak
źródło
1
Pytanie nie dotyczy liczby tylko wybranych <option> s.
user4642212