.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

You can't change contents of a <select> in IE. You'll have to replace the entire <select> element

Answer 2

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.