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
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.
Hier gibt es verschiedene Möglichkeiten.
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());
});
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());
});
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
Auch für das Auslesen der Options-Texte gibt es ähnliche Möglichkeiten.
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.
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
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.
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.
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);
});
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
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.
$('#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.
$('#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.
$('#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.
$('#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
$('#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.
$('#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.
$('#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
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).
$('#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.
$('#setDisabledAll').click(function(){
$('#jquery-select option').attr('disabled',true);
});
Das Vorgehen zum Deaktivieren aller Optionen ist analog zum Vorgehen beim Deaktivieren einer Option.
$('#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.
$('#setDisabledNone').click(function(){
$('#selectSetDisabled option').removeAttr('disabled');
});
Das Vorgehen zum Aktivieren aller Optionen ist analog.
Demonstration
Lauffähige Demo zu diesen Abschnitt
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.
Noch keine Kommentare vorhanden.
Was denkst du?