I don’t normally blog about pure code subjects, so this is going to be way too technical/boring for the general readership of this blog. However, I wasn’t able to find the definitive answer to this question after searching around with Google, so I figured I’d contribute a little. This is also a wiki-style reminder to myself the next time I need to do this.

Mostly you’ll be interested in this post if you’re trying to programmatically add options to a select list using JavaScript. Of all the ways to do this, there are a few that work and many that don’t. The catch seems to be that IE is picky about how and when the data “inside” the option tag (the visible text in the option list) is set. According to the documentation there should be any number of ways to set this–.text, .innerHTML, .innerText. Of those, the only one that seems to be broadly compatible is .text. .innerText is IE-only, so it’s right out. .innerHTML is valid across platforms, but it messes with the object model in IE6 and IE7 (and IE8 beta 1, now that I look) in such a way that if you use it, you have to add the option element to the select element before setting the .innerHTML property. See below for a breakdown of the methods, plus test code. Blogger might break this, so be sure to look at the plain test page (“view source” is going to be a lot friendlier on that page as well).

In any case, here’s the take-away when adding options to select elements:

• Always use the .text property of the newly-created option object to set the visible text for the option.
• As a precaution, add the new option object to the select object’s options collection before setting other properties of the option.

function createSetTextAddOption(selectEl,val,displayText) {
 var o = document.createElement("OPTION");
 o.value = val;
 o.text = displayText;
 selectEl.options.add(o);
 return false;
}
   

function createSetInnerHTMLAddOption(selectEl,val,displayText) {
 var o = document.createElement("OPTION");
 o.value = val;
 o.innerHTML = displayText;
 selectEl.options.add(o);
 return false;
}

function createAddOptionSetInnerHTML(selectEl,val,displayText) {
 var o = document.createElement("OPTION");
 o.value = val;
 selectEl.options.add(o);
 o.innerHTML = displayText;
 return false;
}

function createAddOptionSetText(selectEl,val,displayText) {
 var o = document.createElement("OPTION");
 o.value = val;
 selectEl.options.add(o);
 o.text = displayText;
 return false;
}

// generally compatible inline adds
createSetTextAddOption(document.getElementById('sel5'),'1','added value 1');
createAddOptionSetInnerHTML(document.getElementById('sel5'),'3','added value 3');
createAddOptionSetText(document.getElementById('sel5'),'4','added value 4');
   
addNewSelect(document.getElementById('sel5'),'1','added value 1',createSetTextAddOption);
addNewSelect(document.getElementById('sel5'),'1','added value 3',createAddOptionSetInnerHTML);
addNewSelect(document.getElementById('sel5'),'1','added value 4',createAddOptionSetText);

// these two fail in IE6, IE7, IE8
createSetInnerHTMLAddOption(document.getElementById('sel5'),'2','added value 2');
addNewSelect(document.getElementById('sel5'),'1','added value 2',createSetInnerHTMLAddOption);

Again, I encourage you to view the plain test page to avoid any Blogger-induced weirdness.