Optionen eines Selects per jQuery entfernen und wieder hizufügen

Leider unterstützen zu viele Browser zu wenige wichtige Manipulationen an Optionen eines Selects. Der IE < 9 kann bspw. kein $(‚option').css(‚display','none');. Das Element wird trotz des „Verbotes“ dennoch angezeigt. Mobile Safari 5.1. unterstützt hingegen keine disabled Optionen, Werde auf diese Weise: $('option').attr('disabled','disabled');, noch auf eine zweite Weise: $('option').attr('disabled',true);.

Die von jQuery dafür eigentlich vorgesehene .hide() Funktion wird leider auch nur von relativ wenigen Browsern unterstützt. Will man sich aber darauf verlassen, dass bestimmte Optionen bei gegebenen Situationen nicht auswählbar sein dürfen, bleibt einem also keine weitere Möglichkeit als die bestimmten Optionen eines Selects bei Bedarf komplett zu entfernen und vor allem wieder zurück in das Select einfügen zu können.

jQuery ist aber dennoch auch hier Dein Freund und hilft Dir wunderbar bei der Ausführung. Der Trick liegt darin, alle Elemente, die gelöscht werden in einer Variable zwischenzuspeichern um sie bei Bedarf wieder zurück in das select einpflanzen zu können. jQuery kann dabei das gesamte DOM Objekt zwischenspeichern, so dass das Handling mit der Variable extrem einfach wird.

Wirklich interessant wird es aber erst, wenn die Anforderung dazukommt, dass in den Browsern, die disabled options erlauben die options Elemente nicht gelöscht sondern disabled werden. Dazu später mehr.

Vielen Dank an dieser Stelle an jeff fabiny von StackOverflow für den Tipp mit der Speicherung und Einsetzung ganzer DOM Elemente. Ich hatte es nämlich vorher auf HTML String Basis probiert => wesentlich umständlicher!

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.