niedenzu

Hints and tricks for developers

Martins Amazon Wunschliste

Ändern von Comboboxen (SELECT-Tag) über innerHTML 23. November 2010

In der Ajax-Welt kommt es häufig vor, dass man die Werte von Comboboxen (also die Options innerhalb eines Select-Tags) dynamisch ändern möchte. Z.B. bei einer Fahrzeugsuche. In der Combobox Marke wird VW ausgewählt. Abhängig davon soll die Combobox Typ mit Golf, Polo, Passat usw. gefüllt werden.

Eine Möglichkeit besteht in der Manipulation des DOMs. Diese Möglichkeit ist aber vor allem im Internet Explorer (IE) sehr imperformant. In den meisten Fällen ist es besser, das HTML, das das Ergebnis der DOM-Operationen sein würde, “von Hand” zu erzeugen und per innerHTML dem Element zu verpassen. Das funktioniert auch in Browsern einwandfrei. Im IE dagegen weit gefehlt.

Der IE hat beim Select-Tag einen Bug (zumindest bis zur Version 7). Wird das Innere eines Select-Tags über innerHTML gesetzt, ist der IE davon unbeeindruckt. Er zeigt weiterhin die alten Einträge in der Combobox.

Hier kommt die IE-spezifische Eigenschaft outerHTML ins Spiel. Verwendet man outerHTML, zeigt der IE die Änderungen nach dem Aufruf auch an.

outerHTML hat zwei unangenehme Nebenwirkungen:

  • Der Select-Tag selbst ist auch enthalten. D.h., er muss vollständig im manipulierten String enthalten sein.
  • Nach dem Zuweisen von outerHTML wird im DOM eine neue Instanz erzeugt. Um auf das geänderte Element nochmals zuzugreifen, muss es über document.getElementById() wieder geholt werden.

Hier ein Bsp. für die Befüllung eines Select-Tags:


var select = document.getElementById("mySelect");
var num = select.options.length + 1;
select.innerHTML = "";
var innerHTML = "";
// innerHTML erzeugen
innerHTML = "<option value="1">Golf"</option>"
+ "<option value="2">Polo"</option>"
+ "<option value="3">Passat"</option>";

if (isIe()) {
// nur für IE

var indexOfClosingTag = select.outerHTML.toUpperCase().lastIndexOf("</select>");
var outerHTML = select.outerHTML.substring(0, indexOfClosingTag) + innerHTML + select.outerHTML.substring(indexOfClosingTag);
select.outerHTML = outerHTML;

select = document.getElementById(select.id);
} else {
// nur für Browser
select.innerHTML = innerHTML;
}
select.styles.display = "";

Der grün markierte Code setzt das erzeugte innerHTML in die vorhandenen Select-Tags ein.

Damit die Zeile select.styles.display = ""; ausgeführt werden kann, muss vorher die neu erzeugt Instanz des Select-Tags aus dem DOM zurückgeholt werden (rote Zeile).

No Comments on Ändern von Comboboxen (SELECT-Tag) über innerHTML
Categories: DB2 JavaScript
Martin Rocks