seeseekey.net

AJAX ist schon eine feine Sache. Wenn die Daten dann zurückkommen und man damit eine Combobox füllen möchte so sieht das meist so aus:

function showData() {
  if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
    document.getElementById("combobox").innerHTML = xmlHttp.responseText;
  }
}

Es gibt hierbei bloß ein Problem, der Internet Explorer mag es einfach nicht. Während dieser Code mit Chrome, Firefox, Opera et cetera wunderbar funktioniert, gibt es beim Internet Explorer ein Problem. Er hat Probleme mit dem innerHTML und füllt es einfach nicht.

Damit man nun nicht seinen ganzen Code umschreiben muss gibt es auf http://www.fpruefer.de/blog/archives/innerHTML-und-die-Select-Box-2009-08-04.html eine interessante Funktion welche sich das outerHTML nimmt (welches der Internet Explorer unterstützt) und dort die <select> Tags ausspart und nur alles zwischen diesen Tags ändert. Die Funktion welche die Arbeit dabei erledigt sieht dabei 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;
    }
  }
}

Angewendet wird sie dann so:

fillSelect(document.getElementById("combobox"), xmlHttp.responseText);

Und schon ist dieses Problem Geschichte :)

Weitere Informationen gibt es unter:
http://support.microsoft.com/kb/276228/de