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

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);
}