Änderungen in Select-Formularen auslesen, darauf reagieren und diese manipulieren mit jQuery

Mit jQuery auf Änderungen in einem Select-Formular zu reagieren ist im Grunde ganz einfach. Hier ein kleines Walkthrough:

Das HTML-Beispiel:

<form [..]>
    <select id=’selectid‘ name=’selectthis‘>
        <option value=’a‘>h</option>
        <option value=’b‘>i</option>
        <option value=’c‘>j</option>
        <option value=’d‘>k</option>
        <option value=’e‘>l</option>
        <option value=’f‘ selected=’selected‘>m</option>
        <option value=’g‘>n</option>
    </select>
</form>

Wenn wir bei einer Änderung des Select-Blockes in irgendeiner Form reagieren wollen, dann hilft uns die Funktion „.change()“ von jQuery.

$(„#selectid“).change(function() {
    //do stuff here
});

Wenn der Benutzer jetzt das Formular ändert, dann wird die anonyme Funktion aufgerufen (Als „anonyme Funktion“ bezeichnet man die Funktionen die direkt als Parameter übergeben werden und keinen Namen haben).

Sagen wir, wir wollen, wenn die Option mit dem Wert (value) „e“ aufgerufen wird, an ein weiteres select-Feld eine Option anfügen, dann sähe der Code so aus:

$(„#selectid“).change(function() {
    if($(this).val() == „e“) {
        $(„#weiteres-select-feld“).append(„<option value=’klasse‘>Toll</option>“);
    }
});

Dieser Code macht folgendes:
Der Ausdruck „$(this)“ enthält eine Referenz auf die ausgewählte Option und mit „$(this).val()“ lesen wir den Wert dieser Option aus. Achtung mit Wert ist hier der value Parameter gemeint, nicht der Text zwischen den öffnenden und schließenden Tags.
Wenn dieser Wert nun also gleich e ist, dann wird an das select Feld mit der Id: „weiteres-select-feld“ der HTML-Code „<option […]>[..]</option>“ an gehangen.

Hinweis: Die Zeile $("#weiteres-select-feld").append("<option value='klasse'>Toll</option>"); kann man auch so umsetzen: $(<option></option>').val('klasse').text('Toll').appendTo('#weiteres-select-feld');

Falls wir nun noch zusätzlich sicherstellen wollen, dass die angefügte Option als selected markiert wird, dann muss folgender Code noch hinzugefügt werden:

$(„#selectid“).change(function() {
    if($(this).val() == „e“) {
        $(„#weiteres-select-feld“).append(„<option value=’klasse‘>Toll</option>“);
        $(„#selectid option:selected“).each(function () {
            $(this).attr(„selected“, false)
        });
        $(„#weiteres-select-feld option[value=’klasse‘]“).attr(„selected“, true);
    }
});

Hier passiert nun folgendes:
Der Aufruf $("#selectid option:selected").each([...] geht alle selektierten Optionen durch und setzt diese mit der nächsten Zeile auf nicht selektiert. Zum Schluss wird über #weiteres-select-feld option[value='klasse'] der Wert des eben hinzugefügten Option auf selected gesetzt. Um die richtige Option zu erwischen muss über das Schlüsselwort option[value='|DER WERT DEINER OPTION'|'] der Wert des values, der zu selektierenden Option ausgewählt werden.

Eine Anmerkung: Wenn man die selektierten Optionen nicht durch loopt, dann bleiben bereits als selected markierte Optionen weiterhin selektiert, was zu komischen Ergebnissen beim Abschicken des Formulars führen kann.

Schlusswort: Man kann, vor allem das letzte Beispiel, auch anders umsetzen. Das war lediglich mein Weg.

Ein Gedanke zu „Änderungen in Select-Formularen auslesen, darauf reagieren und diese manipulieren mit jQuery

  1. Pingback: Immobilien in Neumünster

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.