Question

I’ve got an HTML ‘select’ element which I’m updating dynamically with code something like this:

var selector = document.getElementById('selectorId');     for (var i = 0; i < data.length; ++i) {   var opt = document.createElement('option');   opt.value = data[i].id;   opt.text = data[i].name;   selector.appendChild(opt); } 

Works fine in Firefox, but IE7 doesn’t resize the list box to fit the new data. If the list box is initially empty (which it is in my case), you can hardly see any of the options I’ve added. Is there a better way to do this? Or a way to patch it up to work in IE?

Answer 1

Set the innerHTML property of the option objects, instead of their text.

var selector = document.getElementById('selectorId');     for (var i = 0; i < data.length; ++i) {   var opt       = document.createElement('option');   opt.value     = data[i].id;   opt.innerHTML = data[i].name;   selector.appendChild(opt); } 

Works on IE6, just tested. Does not break on FF3, so I guess this is it.

(I chose ‘innerHTML’ because this works across browsers. To set the literal text, you have to use ‘innerText’ on IE, and ‘textContent’ on FF, and you probably have to test it elsewhere as well. As long as there are no special characters (&, <, >) in the ‘name’ properties, ‘innerHTML’ will be enough.)