document.getElementById().innerHTML for select tag doesn't work in IE

Question

i have the following simple script

---

<input type="button" onclick="document.getElementById('a').innerHTML = '<option>something</option>';"/>    
 <select id="a" style="width: 150px;">
</select>

but it doesn't work in IE. could you tell me why? thanks

Answer 1

IE doesn't tend to like you doing things that way for such items. Same goes for setting the innerHTML of tables.

You should learn to do things the DOM way....for instance, using createElement ("OPTION"), then appendChild() (first removing children with removeChild() if needed). In general it is way better than innerHTML.

Answer 2

Use this code:

var optionElement = document.createElement("option");
optionElement.innerHTML = "some text here";

document.getElementById('a').appendChild(optionElement);

Answer 3

You will be better off having the AJAX script return a JSON object containing the options you want, then using DOM methods to create the option nodes to match them.

If you really must do this with HTML strings, the way to do it is to write a completely new <select> element with the options inside. Then you can copy the information from the <option> nodes into to the select you were originally targeting.

var select= document.getElementById('a');
select.options.length= 0;

var div= document.createElement('div');
div.innerHTML= '<select>'+options+'</select>';
var options= div.firstChild.options;
for (var i= 0; i<options.length; i++) {
    var o= options[i];
    select.options[i]= new Option(o.text, o.value, o.selected);
}