[AJAX][HTML][PHP]Funkcja .innerHTML ucina znacznik <option> w IE Opcje

[furious_knight]

Witam, pracuję właśnie nad udoskonaleniem pewnej aplikacji i spotkałem się z pewnym problemem.... w pliku index.html z formularzem jest <select> który zawiera wygenerowane z bazy danych rekordy które za pomocą biblioteki SMARTY wyświetlam w tym pliku HTML.

Po wybraniu jakiejś opcji z tego pola dynamicznie za pomocą AJAXA i javascript jest pobierany id rekordu i wynik zapytania generowany w pliku dane.php w którym jest zapytanie o modele na podstawie ID pierwszego wybranego przez nas pola po czym za pomocą funkcji echo i pętli foreign jest wysyłany wynik składający się z kodu html i zmiennych php <option value="$zmienna z ID">&zmienna z NAZWĄ </option> i taki wynik jest wyświetlany w drugiej liście wyboru w formularzu.

Kod śmiga pięknie i gładko na FF i chrome ale gdy wklejam go do aplikacji opartej na IE (pewnie trochę starczej) to wyskakuje mi pusta lista.... na podstawie alertów udało mi się ustalić że zmienna w tekst tworzona w JS po dotarciu do index.html ma prawidłową postać czyli <option> dane </option> ale po użyciu funkcji dir.innerHTML jest obcinany pierwszy znacznik <option> i cały wynik szlak trafia....

Poniżej skrypty

INDEX.HTML

[HTML] pobierz, plaintext 
<script type="text/javascript">
 
function pobierzDane()
{
  if(XMLHttpRequestObject){
    var div = document.getElementById("warstwaDanych");
    var tekst = document.getElementById("tf1").value;
 
    XMLHttpRequestObject.open("POST", "dane.php");
    XMLHttpRequestObject.setRequestHeader(
      'Content-Type', 'application/x-www-form-urlencoded');
 
    XMLHttpRequestObject.onreadystatechange = function()
    {
      if (XMLHttpRequestObject.readyState == 4){
        if(XMLHttpRequestObject.status == 200){
          var tekst = XMLHttpRequestObject.responseText;
		   alert(tekst);
          tekst = unescape(tekst);
		  alert(tekst);
          div.innerHTML = tekst;
		  alert(div.innerHTML);
 
        }
      }
    }
    tekst = escape(tekst);
    XMLHttpRequestObject.send("type=" + tekst);
  }
}
 
var XMLHttpRequestObject = getXMLHttpRequestObject();
 
</script>
 
 
<div id='form'>
	<form action="index.php?action={$action}&page=new_sent" method="POST">
		<div id='page1'>
		<div class="column" style="width: 20%; border: 1px solid black;">
			<fieldset>
			<legend>Typ urządzenia:</legend>
				<select name="type" id="tf1" onchange="pobierzDane();">
					{foreach $types as $type}
						<option value="{$type.ID}">{$type.Type}</option>
					{/foreach}
				</select>  <img src="img/faq.png" alt="faq" /></fieldset>
			<fieldset>
 
			<legend>Model:</legend>
				<select id="warstwaDanych" >
				   <option>Wybierz</option>
				</select>
 
</div>
[HTML] pobierz, plaintext 

DANE.PHP

[PHP] pobierz, plaintext 
<?php
 
// połączenie z bazą danych
		global $user;
 
	$wynik = mysql_query("SELECT CT_modele.id, CT_modele.nazwa FROM CT_modele WHERE kategoria_id='$loginy'")
	or die("Błąd w zapytaniu!");
		  $string = "";
	while ($rek = mysql_fetch_array($wynik))
		{
		  //echo ' <option value="'.$rek['id'].'"> '.$rek['nazwa'].'</option>';
		  echo $rek['id'].':'.$rek['nazwa'].':';
		}
?>
[PHP] pobierz, plaintext 

Generalnie wyczytałem że jest problem z interpretacją .innerhtml przez przeglądarkę IE dla tego moje pytanie brzmi nie gdzie jest problem tylko jak go obejść.... liczę na pomoc doświadczonych forumowiczów dodatkowo dodam że PHP, HTML znam w miarę dobrze ale gorzej JS, kod podany w listingu to gotowe rozwiązanie jakie udało mi się znaleść w internecie dla tego jeżeli ktoś będzie miał jakieś uwagi albo pomysły związane z modyfikacją JS to łopatologicznie proszę

Wydaje mi się że najlepszym sposobem było by pobranie zawartości podzielonej jakimiś znakami np. ::NUMERID::NAZWA:: a potem za pomocą JS i wyrażeń regularnych wydobyć dane i powrzucać je w szablon zawarty w pętli. Gdybym miał to zrobić w php poradził bym sobie ale to musi być zrobione w JS i potrzebuję pomocy

Pozdrawiam

Dla dokładniejszego zrozumienia przedstawię jak wygląda kod po przejściu przez .innerHTML

POBRANE_DANE</option>
<option>POBRANE_DANE</option>
<option>POBRANE_DANE</option>
<option>POBRANE_DANE</option>
<option>POBRANE_DANE</option>
<option>POBRANE_DANE</option>
itd.......

[SmokAnalog]

Najprościej to by było użyć jQuery, które dobrze sobie radzi z tymi małymi dziwactwami IE.