I have recently encountered a number of issues relating to populating <select> elements using JavaScript. The largest issue I was having was with <select> elements that were themselves created using JavaScript. In this case the elements would be un-selectable.

If you clicked on them, or tabbed to them; then they would highlight, but nothing else.

The issue it turns out is caused by the way that Internet Explorer <8 handles <select> lists. More to the point the way that it treats them as special elements, not standard HTML elements. I was simply appending the <option> elements to the <select> as DOM child nodes. While this works correctly in every other web browser I tested (Chrome 4>, FF 3.5>, IE8) it doesn't work in IE7, which was a requirement for the project. It turns out that in Internet Explorer if you want to add more options to a <select> element you need to create new Option objects and append them to the <select>.objects 'array' (I say 'array' as its not really an array... but it behalves enough like one).

(Note, I am using Prototype language extensions in the below example)

var select = document.getElementById('mySelect');
var options = new Hash({'0': 'ACT', '1': 'SA', '2': 'NT', '3': 'NSW', '4': 'Vic', '5': 'Tas', '6': 'WA', '7': 'Qld'});
var i = 0;
options.each(function(opt) {
select.options[i] = new Option(opt.value, opt.key, null, false);
i = i++;
});


I hope this helps you if you are also having random issues with <select> elements and Internet Explorer.