Achtung, für alle, die sowas mal machen müssen..

options verstecken ist gar nicht so einfach, auch nicht mit jQuery

Diese Woche musste ich auf Arbeit im Zusammenhang mit einem Projekt ein Formular umsetzen, dass eine Besonderheit hatte: Es bestand aus zwei Selectboxen, die voneinander abhängig waren. D.h. wenn man mit einer Selectbox etwas ausgewählt hat, sollten sich die Optionen der zweiten Selectbox ändern (wegfallen oder dazu kommen). Ich habe mir daraufhin mit jQuery eine Funktion geschrieben, die das für mich erledigt.

Ohne mir groß etwas dabei zu denken, nutzte ich die hide()-Funktion, die jQuery standardmäßig mitbringt. Alles funktionierte einwandfrei in Firefox und da ich davon ausgegangen bin, dass das JavaScript-Framework Cross-Browser-kompatibel ist, teste ich die Funktion nicht in anderen Browsern und kümmerte mich stattdessen erstmal um das Layout. Als alles fertig war, freute ich mich, rechnete meine Zeit ab und widmete mich anderen Tickets.

Gestern Mittag dann erhielt ich den Hinweis, dass die Auswahl der Selectboxen im IE7 nicht funktioniert. Gut dachte ich mir.. schaust es dir mal an.. und tatsächlich: egal was ausgewählt wurde, die zweite Selectbox blieb mit allen Optionen befüllt, es tat sich nichts.

Verdammter Internet Explorer!

.. schoss mir durch den Kopf. Also öffnete ich Opera, Chrome und Safari und testete das Formular dort – wieder nichts. In keinem Browser (außer Firefox) funktionierte die Auswahl. Langsam wurde ich etwas nervös..

Wie löse ich das Problem jetzt ohne viel Aufwand?!

Ich überlegte kurz und dann viel mir die Lösung ein, anstatt die option-Tags zu verstecken, musste ich sie nur deaktivieren. Also hab ich die hide()-Funktion mit attr(‘disabled’,'disabled’) ausgetauscht und schon gings. Yay, der Tag war gerettet!

Merke:

Niemals options versuchen zu verstecken, das funktioniert nicht in allen Browsern, einfach nur deaktivieren!

Wieder etwas dazu gelernt!