JQuery: Select auslesen und manipulieren

von Martin Abraham
0 Shares

Die jQuery-Serie wurde 2010 verfasst. Inzwischen ist die Bibliothek jQuery obsolet, da aktuelle Browser DOM-Standards erfüllen. Die Empfehlung ist klar in neuen Projekten auf Vanilla-Javascript oder aktuelle Frontend-Frameworks zu setzen, statt auf jQuery. Diese Artikel bleiben als Hilfestellung für bestehende Legacy-Anwendungen erhalten.

Select Elemente sind bei der Manipulation des DOM mit Javascript lästig und schwierig zu handhaben. Auf Basis von jQuery stelle ich im Folgenden Lösungen für häufige Probleme vor.

So wird u.a. gezeigt, wie man mit jQuery

  • ausgewählte Options ausliest,
  • einzelne oder alle Options auswählt und Auswahlen aufhebt,
  • Select Elementen Options hinzufügt oder Options aus Select Elementen löscht,
  • Options sortiert, bzw. in Reihen bringt und
  • Options aktiviert oder deaktiviert (disabled)

Die in diesem Artikel aufgeführten Code-Fragmente greifen auf ein Select Element mit der Id jquery-select zu. Die Auslöser sind jeweils in der ersten Zeile der Code-Fragmente im ersten $-Operator benannt.

Eine grundlegende Einführung in jQuery möchte ich nicht geben und empfehle für den Einstieg das Tutorial von Matthias Schütz.

Für einen tieferen Einsteif in jQuery einsteigen möchte und ein gutes deutschsprachiges Buch sucht, dem empfehle ich jQuery: Das Praxisbuch (Galileo Computing).

Dieser Artikel ist Teil der Serie Formular-Felder auslesen und manipulieren mit JQuery.

Select Werte ausgewählter Options auslesen

Hier gibt es verschiedene Möglichkeiten.

Werte als String auslesen

Einen String, der die Werte (value) der ausgewählten Options durch Kommas getrennt enthält, liefert folgender Code.

$('#jquerySelectAuslesen').click(function(){
alert($('#jquery-select').val());
});

Werte als String auslesen

Einen String, der die Werte (value) der ausgewählten Options durch Kommas getrennt enthält, liefert folgender Code.

$('#jquerySelectAuslesen').click(function(){
alert($('#jquery-select').val());
});

Werte einzeln auslesen

Wer einzeln auf die Werte zugreifen möchte, erreicht dieses mittels:

$('#jquerySelectAuslesen2').click(function(){
$('#jquery-select option:selected').each(function(){
alert($(this).val());
});
});

In diesem Beispiel wird die jQuery Funktion each (jQuery API-Dokumentation) verwendet, um über die ausgewählten Options zu iterieren, die zuvor über den Selected Selektor (jQuery API-Dokumentation) ermittelt wurden. Mittels this wird auf das aktuelle Element zugegriffen. Statt die Werte mittels alert in einem Dialog-Fenster auszugeben, könnten diese so beispielsweise in einem Array gespeichert oder anderweitig verarbeitet werden.

Demonstration

Lauffähige Demo zu diesen Abschnitt

Text ausgewählter Options auslesen

Auch für das Auslesen der Options-Texte gibt es ähnliche Möglichkeiten.

Texte als String auslesen

Einen String, der die Texte der ausgewählten Options konkateniert enthält, liefert folgender Code:

$('#getSelectedText1').click(function(){
alert($('#jquery-select option:selected').text());
});

Der praktische Nutzen dieser Variante ist meiner Meinung nach fraglich.

Texte einzeln auslesen

Einzeln auf die Text zugreifen kann man mittels:

$('#getSelectedText2').click(function(){
$('#jquery-select option:selected').each(function(){
alert($(this).text());
});
});

Die Funktionsweise ist analog zu der beim Auslesen der Werte beschriebenen.

Demonstration

Lauffähige Demo zu diesen Abschnitt

Auswählen von Options und Aufheben von Auswahlen

Häufig möchte man Select Options in Abhängigkeit von anderen Eingabefeldern vorauswählen. So könnte beispielsweise bei der Auswahl des Geschlechts in einem Formularfeld in einem anderen Feld die vorausgewählte Anrede angepasst werden.

Bestimmte Option als ausgewählt markieren

Möchte man eine spezielle Option als ausgewählt (selected) markieren, erreicht man dies mittels:

$('#setSelectedOne').click(function(){
$("#jquery-select option[value='Wert 2']").attr('selected',true);
});

Über den Attribut Selektor [value='Wert 2'] (jQuery API-Dokumentation) wird der Wert (Achtung: Wert nicht Text) der auszuwählenden Option mitgeteilt und die Auswahl auf diese eine Option beschränkt. Mittels der jQuery-Funktion attr() (jQuery API-Dokumentation) wird im gewünschten Eintrag das Attribut selected gesetzt. Bei normalen Selects wird die bisher ausgewählte Option deselektiert. Ist die Auswahl mehrerer Options möglich. Dies ist bei Select Elementen, für die das Attribut multiple gesetzt ist, der Fall, bleiben bisher ausgewählte Options ausgewählt. Ist dieses Verhalten nicht gewünscht, so könnte man zuvor die bisherige Auswahl aufheben.

Alle Options auswählen

Für den seltenen Fall, dass man alle Select Options als ausgewählt markieren möchte, hilft:

$('#setSelectedAll').click(function(){
$('#jquery-select option').attr('selected',true);
});

Auswahl aufheben

Häufiger ist die bisherige Auswahl aufzuheben. Ein möglicher Fall ist bereits unter „Bestimmte Option als ausgewählt markiere“ beschrieben.

$('#setSelectedNone').click(function(){
$('#jquery-select option').removeAttr('selected');
});

Mit der jQuery-Funktion removeAttr() (jQuery API-Dokumentation) können Attribute in Elementen gelöscht und in unserem Fall somit die Auswahl aufgehoben werden.

Demonstration

Lauffähige Demo zu diesen Abschnitt

Options hinzufügen und löschen

Auch das Hinzufügen und Löschen von Select Einträgen ist eine häufige Aufgabe. Sie tritt u.a. auf, wenn ein Select Feld abhängig von anderen Formularfeldern belegt werden soll. Ein Beispiel wäre ein Select Feld zur Auswahl des Wohnorts, welches in Abhängigkeit vom Wert eines weiteren Felds zur Auswahl des Bundeslands belegt wird.

Option als unterste Option einfügen

$('#updateOptionsAddEnd').click(function(){
$("<option/>").val("Wert 2").text("Text 2").appendTo("#jquery-select");
});

Mittels $-Operator wird eine leere Option erzeugt, die anschließend über die jQuery Funktionen val() (jQuery API-Dokumentation) und text() (jQuery API-Dokumentation) mit Wert und Text angereichert wird. Anschließend wird die neue Option über appendTo() (jQuery API-Dokumentation) am Ende der Optionsliste eingefügt.

Option als oberste Option einfügen

$('#updateOptionsAddEnd').click(function(){
$("<option/>").val("Wert 2").text("Text 2").prependTo("#jquery-select");
});

Das Vorgehen unterscheidet sich in diesem Fall dadurch, dass das neue Element mittels der jQuery Funktion prependTo() (jQuery API-Dokumentation) am Anfang der bestehenden Auswahlliste, also als oberstes Element, eingefügt wird.

Option löschen

$('#updateOptionsRemoveOne').click(function(){
$("#jquery-select option[value='Wert 2']").remove();
});

Über den Attribut Selektor [value='Wert 2'] (jQuery API-Dokumentation) wird die Auswahl auf den gewünschten Eintrag reduziert und dieser mit der jQuery Funktion remove() (jQuery API-Dokumentation) aus der Liste entfernt.

Alle Options löschen

$('#updateOptionsRemoveAll').click(function(){
$("#jquery-select").empty();
});

Über die jQuery Funktion empty() (jQuery API-Dokumentation) werden alle Kind-Elemente, bzw. Optionen, des Select Felds entfernt.

Demonstration

Lauffähige Demo zu diesen Abschnitt

Options sortieren und umordnen

Alle Options mit Comparator-Funktion sortieren

$('#sortOptions').click(function(){
var sorted = $.makeArray($("#jquery-select option")).sort(function(a,b){
return $(a).text() > $(b).text() ? 1:-1;
});
$("#jquery-select").empty().append(sorted);
});

Die Einträge der Auswahlliste werden mittels der jQuery Funktion makeArray() (jQuery API-Dokumentation) in ein Array umgewandelt, um sie anschließend mit Hilfe der Javascript eigenen Array-Sortierfunktion sort() (Javascript-Dokumentation) zu sortieren. Der Funktion sort() wird im Beispiel eine Comparator-Funktion übergeben, auf deren Basis die Sortierung erfolgt. Wird keine Funktion übergeben, wird lexikographisch sortiert.

Options um eine Position nach oben bewegen

$('#orderOptionsUp').click(function(){
$("#jquery-select option:selected").each( function(i,x) {
var newPos = $('#jquery-select option').index(this) - 1;
if (newPos > -1) {
$('#jquery-select option').eq(newPos).before("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
$(this).remove();
}
});
});

Die ausgewählten Optionen werden in Zeile 2 mittels jQuery Selected Selector (jQuery API-Dokumentation) ermittelt und über diese anschließend mit der jQuery Funktion each (jQuery API-Dokumentation) iteriert. In Zeile 3 wird die aktuelle Position der derzeitigen durchlaufenen Option ermittelt und um eins vermindert in der Variable newPos ablegt. In Zeile 4 wird über die Abfrage sichergestellt, dass der folgende Code und damit die Verschiebung nur für Elemente, die nicht an erster Position stehen, erfolgt. In Zeile 5 werden alle Options ausgewählt und diese Auswahl anschließend mittels der jQuery Funktion eq() (jQuery API-Dokumentation auf die Option vor der zu verschiebenden reduziert. Über die jQuery Funktion before() (jQuery API-Dokumentation) wird anschließend vor dieser Option eine neue mit der zu verschiebenden identische angelegt. In Zeile 6 wird schließlich die zu verschiebende Option mittels der jQuery Funktion remove() (jQuery API-Dokumentation) entfernt.

Options um eine Position nach unten bewegen

$('#orderOptionsDown').click(function(){
var countOptions = $('#selectOrderOptions option').size();
$('#selectOrderOptions option:selected').each( function() {
var newPos = $('#selectOrderOptions option').index(this) + 1;
if (newPos < countOptions) {
$('#selectOrderOptions option').eq(newPos).after("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
$(this).remove();
}
});
});

Das Code-Fragment unterscheidet sich lediglich in drei Punkten von dem vorangegangenen. So wird in Zeile 4 der Index des zu verschiebenden Elements nicht vermindert, sonder um eins erhöht. In Zeile 5 wird das unterste und nicht das oberste Element durch die Bedingung von der Aktion ausgeschlossen. Dieses kann schließlich nicht weiter nach unten geschoben werden. In Zeile 6 wird das neue Element schließlich mit der jQuery Funktion after() (jQuery API-Dokumentation) hinter das auf das ausgewählte Element folgende eingefügt.

Demonstration

Lauffähige Demo zu diesen Abschnitt

Options aktivieren und deaktivieren (disabled)

Besonders in Administrationstools verwende ich gelegentlich die Möglichkeit Optionsfelder zu deaktivieren (disable). Ein Beispiel hierfür wäre eine Auswahlliste, die den Status eines Dokuments mit den drei Auswahlmöglichkeiten Entwurf, Freigabe und Veröffentlicht anzeigt. Ein Redakteur kann die Stati Freigabe und Entwurf setzten, der Status Veröffentlicht ist Chefredakteuren vorenthalten. Um Eingabefehler zu reduzieren und gleichzeitig den Status von veröffentlichten Projekten richtig anzuzeigen, wird nun für Redakteure die Option Veröffentlicht deaktiviert (disabled).

Sind deaktivierte Options ausgewählt, so werden diese beim Versenden des Formulars nicht mitgesendet. Deaktivierte Elemente können ja im Quelltext als ausgewählt definiert werden. Daher empfiehlt sich direkt vor dem Senden alle Optionen zu aktivieren (enable), was man mit folgendem Code-Fragment erreicht:

$('#form').submit(function(){
$('#jquery-select option').removeAttr('disabled');
});

Ausgegangen wird von einem Formular mit der Id form. Für dieses wird über die jQuery Funktion submit() (jQuery API-Dokumentation) die im Funktionsaufruf übergebene Funktion als Event-Handler an das Javascript Submit-Event gebunden. In diesem Handler wird nun mittels der jQuery Funktion removeAttr() (jQuery API-Dokumentation) das Attribut disabled aus allem Options des Select Felds mit der Id jquery-select gelöscht und damit alle Optionen aktiviert (enabled). Somit werden alle ausgewählten Optionen gesendet, auch deaktivierte (disabled).

Eine bestimmte Option deaktivieren

$('#setDisabledOne').click(function(){
$("#selectSetDisabled option[value='Wert 2']").attr('disabled',true);
});

Über den Attribut Selektor [value='Wert 2'] (jQuery API-Dokumentation) wird der Wert der auszuwählenden Option mitgeteilt und die Auswahl auf diese eine Option beschränkt. Mittels der jQuery-Funktion attr() (jQuery API-Dokumentation) wird im gewünschten Eintrag das Attribut disabled gesetzt.

Alle Options deaktivieren

$('#setDisabledAll').click(function(){
$('#jquery-select option').attr('disabled',true);
});

Das Vorgehen zum Deaktivieren aller Optionen ist analog zum Vorgehen beim Deaktivieren einer Option.

Eine Option aktivieren

$('#setNotDisabledOne').click(function(){
$("#jquery-select option[value='Wert 2']").removeAttr('disabled');
});

Die gewünschte Option wird wie beim Deaktivieren einer Option ausgewählt, anschließend mittels der jQuery Funktion removeAttr() (jQuery API-Dokumentation) das Attribut disabled in der Option gelöscht.

Alle Options aktivieren

$('#setDisabledNone').click(function(){
$('#selectSetDisabled option').removeAttr('disabled');
});

Das Vorgehen zum Aktivieren aller Optionen ist analog.

Demonstration

Lauffähige Demo zu diesen Abschnitt

Zum Schluss …

Ich hoffe, ich konnte einigen mit diesem Artikel die Arbeit beim Manipulieren von Select Feldern erleichtern. Sollte ich Standardaufgaben nicht aufgeführt haben, würde ich mich über eine Nachricht freuen. Ein themenverwandtes Beispiel habe ich im Artikel JQuery: Select Options zwischen Selectboxes verschieben veröffentlicht.

Martin Abraham
Martin Abraham
Kostenloser Newsletter

Schließe dich über 1.000 smarten Abonnenten an

Deine Daten sind sicher. Hier ist unsere Datenschutzerklärung.

Noch keine Kommentare vorhanden.

Was denkst du?

© 2020 Musterfirma
DatenschutzImpressum
..