javascript - .innerHTML not working in IE

Question

Im working on a select box that populates based on another select box in an onChange event. It works great in every browser but IE.

function getVersion(str){
if (str==""){
    document.getElementById("vSelect").innerHTML="<option value=''>Please Select a product</option>";
return;
}

if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    document.getElementById("vSelect").innerHTML=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","includes/version.php?product="+str,true);
xmlhttp.send();
}

It changes this

<label>Version: </label>
<select id='vSelect'>
    <option value=''>Please Select a product</option>
</select>

in IE when the onchange fires it just clears out the text of the select. Any Ideas? I am trying to do this without loading a library.

Answer 1

There is a known bug in IE that microsoft confirmed "innerHTML" fails to work on the Select Object in IE and it is declared in this page. they have given the workaround suggesting to wrap a div around the select tag and to use innerHTML. see the same page for the workaround. Hope this helps.