Select Manipulation

Press each of the buttons below to see if your browser supports that method of adding a option to the select.

Browsers known to like all methods

Moz 0.9+ (including flavors like NS6+, Firefox and Camino)
- + Likes all standards-based methods
- - Messes up using (common, but non-standard) innerHTML manipulation
IE 6 (Win)
- ~ likes DOM 0, except for some bizarre reason if createTextNode() is used then it throws an error adding the option to the collection
- - Brokenly inserts empty options when using DOM 2 Core methods, unless the text of the option is set using createTextNode(), or the text (and value) of the option are set AFTER it has been added to the DOM.
- - Uses a non-standard second parameter for HTMLSelect.add: rather than the element to insert before (or null to insert at end) it uses the index to insert at (or omit to insert at end)
IE 5.5 (Win)
- - as above, but doesn't support the DOM 2 HTML methods
IE 5.2.3 (MacOS)
- ~ Likes the DOM 0 methods, but when createTextNode() is used weird things happen.
- - Doesn't like anything else; doesn't even show an error for the DOM 2 Core methods, it just...stops working.
iCab 2.9.7 doesn't like any of the above :)

The button that is green works in all the browsers above (except IEMac...but it's time to let that browser die). To sum up:

Create the option with var opt = document.createElement('option')
Append the option to the select using mySelect.appendChild(opt)
THEN set the text and value for the option: opt.text="Hello"; opt.value=12;

If you MUST support IEMac, then go old-school nasty DOM 0, using new Option().