Falk Prüfer

innerHTML und die Select-Box

Falk Prüfer

Suche

Kalender

Zurück Juli '10
Mo Di Mi Do Fr Sa So
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

Archive

Kategorien



Alle Kategorien

Dienstag, 4. August 2009

innerHTML und die Select-Box

Wenn man im dynamischen Teil einer Webseite eine Select-Box mittels Javascript mit neuen Werten füllen möchte, so kann man das mehr oder weniger umständlich über das DOM mittels document.createElement(), node.removeChild() und node.appendChild() erledigen.
Etwas einfacher sieht, zumindest auf den ersten Blick, die Nutzung der Eigenschaft innerHTML des Select-Knotens aus. Auf den ersten Blick nur deshalb, weil zwar alle Mozilla-basierten Browser und Opera damit kein Problem haben, der Internet Explorer - auch in der aktuellen 8er Version - damit jedoch nicht korrekt umgehen kann.
Nicht korrekt umgehen heißt zu gut deutsch: Die Select-Box bleibt im IE leer!

Der „umständliche” Weg über das DOM wird u.a. von Microsoft selbst als Workaround zu diesem BUG beschrieben.
Auch bei Mr. Foo gibt es eine angeregte Diskussion über den Option Bug im Internet Explorer bei Nutzung von innerHTML und Javascript.

Wer sich jedoch nicht durch das DOM hangeln möchte, weil z.B. die einzufügenden Options bereits als HTML-Text vorliegen und erst mühsam wieder auseinandergenommen werden müßten, dem kann mit einem kleinen Trick gehholfen werden. Der IE interpretiert die Eigenschaft outerHTML, also einen Code inkl. öffnendem und schließendem select-Tag, glücklicherweise korrekt.

Der Ansatz ist damit so logisch wie simpel. Man nehme einfach den aktuellen Text aus outerHTML, filtere das öffnende und schließende select-Tag, setze das neue innerHTML dazwischen und speichere das Ganze wieder als outerHTML des Select-Knotens.
Das Filtern übernimmt dabei eine Regular Expression.


var begin = pList.outerHTML.match(/(<select .*?>)/i);
var end   = pList.outerHTML.match(/(<\/select>)/i);
 

Eine einfache Funktion zum browserübergreifend korrekten Füllen einer Select-Box sieht damit so aus:


function fillSelect(pList, pOptionHTML)
{
  if (pList) {
    if (pList.outerHTML) {
      var begin = pList.outerHTML.match(/(<select .*?>)/i);
      var end   = pList.outerHTML.match(/(<\/select>)/i);
      if (begin && end) {
        var s = begin[1] + pOptionHTML + end[1];
        pList.outerHTML = s;
      }
    }
    else {
      pList.innerHTML = pOptionHTML;
    }
  }
}
 

Beispiel zu innerHTML und die Select-Box

Geschrieben von Falk Prüfer in Javascript um 18:30 | Kommentar (1) | Trackbacks (0)

Trackbacks
Trackback für spezifische URI dieses Eintrags

Keine Trackbacks

Kommentare
Ansicht der Kommentare: (Linear | Verschachtelt)

Anmerkung: Bei der Zuweisung über outerHTML zeigt der IE das Element zwar an, verzichtet jedoch auf den korrekten Aufbau des DOM für das betroffene Element.
Für das o.a. Beispiel bedeutet dies, dass pList.childNodes.length den Wert 0 zurückliefert und pList.firstChild leer (NULL) ist.
Nach einer Zuweisung mittels outerHTML läßt sich also nicht (mehr) per DOM auf die Kindelemente des geänderten Objektes zugreifen.
#1 Falk Prüfer am 23.11.2009 11:26 (Antwort)

Kommentar schreiben

Umschließende Sterne heben ein Wort hervor (*wort*), per _wort_ kann ein Wort unterstrichen werden.
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.

Um maschinelle und automatische Übertragung von Spamkommentaren zu verhindern, bitte die Zeichenfolge im dargestellten Bild in der Eingabemaske eintragen. Nur wenn die Zeichenfolge richtig eingegeben wurde, kann der Kommentar angenommen werden. Bitte beachten Sie, dass Ihr Browser Cookies unterstützen muss um dieses Verfahren anzuwenden.
CAPTCHA