Zählen der Anzahl der Options-Tags in einem Select-Tag in jQuery


159

Wie zähle ich mit jQuery die Anzahl der <option>s in einem <select>DOM-Element?

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

Ich möchte die Anzahl der <option>Tags im <select>DOM-Element ermitteln, da ich damit das Einstellungsfeld mit dieser Anzahl von Eingabefeldern mit dem entsprechenden Optionswert aus dem Dropdown-Feld öffnen und in der Vorschau erneut ändern möchte Panel.

Das obige Dropdown-Feld befindet sich in meinem Vorschaufenster, das von jQuery generiert wird.

Antworten:



51

Die W3C-Lösung:

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

5
Eine Variation dieser Methode mit modernem Javascript wird sein var len = document.querySelector("#input1").length;
Jacob Nelson


18

Ihre Frage ist etwas verwirrend, aber vorausgesetzt, Sie möchten die Anzahl der Optionen in einem Panel anzeigen:

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

und

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

Ich bin mir nicht sicher, ob ich den Rest Ihrer Frage verstehe.


14

In einem Optionsfeld mit Mehrfachauswahl können $('#input1 :selected').length;Sie die Anzahl der ausgewählten Optionen abrufen. Dies kann nützlich sein, um Schaltflächen zu deaktivieren, wenn eine bestimmte Mindestanzahl von Optionen nicht erfüllt ist.

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

Ich fand, dass dies funktioniert, nachdem ich die Klammern entfernt hatte, die $('#input1 :selected').length; die Dokumentation api.jquery.com/length
Leonard Kakande

6

Ok, ich hatte ein paar Probleme, weil ich in einem war

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

Ich hatte mehrere auf meiner Seite, deshalb habe ich eine Klasse verwendet.

Mein Dropdown wurde automatisch von einer Ajax-Anfrage gefüllt, als ich darauf klickte, also hatte ich nur das Element $ (this)

so...

Ich musste es tun:

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

6

Die beste Form ist dies

$('#example option').length

Diese Nur-Code-Lösung (mit geringem Wert) wurde 4 Jahre zuvor von Sadikhasan bereitgestellt. Die Verwendung von lengthwurde von Karim79 9 Jahre zuvor veröffentlicht. Diese Antwort kann sicher von der Seite gelöscht werden, da sie vollständig redundant ist.
Mickmackusa

-1

Ein weiterer Ansatz, der nützlich sein kann.

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

1
Die Frage fragt nicht nach der Anzahl nur ausgewählter <option> s.
user4642212
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.