Browser Neutral Way to add options to a select element in javascript

Question

I just learned something interesting. The add method for the javascript select object in IE 6 takes only one parameter. It throws an error when you pass it two parameters which I believe is the standard, even as documented on the MSDN site.

My question is this. What is your best-practice recommendation for programmatically adding option elements to a select element in javascript?

• Call the add method differently based on the value of the user agent?
• Wrap the select object in a class that provides the proper method signature?
• Use a javascript library which does this for you (specify which library)?

Answer 1

Adding a new Option type works at least IE6 and up

function addOption(selectID, display, value)
{
  var obj = document.getElementById(selectID);
  obj.options[obj.options.length] = new Option(display, value);
}

Additionally tested in Firefox 2, 3, Opera 8, 9.5, and Safari 4 successfully. IE4 failed :(

Answer 2

$("#selectID").addOption(value, text);

using the addOption function from the jQuery selectboxes plugin

Answer 3

As I remember, IE4 accepts creation of an option element and appending it, but perhaps I don't recall it coorrectly !-)

Answer 4

You can use a try-catch block for doing this :

              try
 {
  //Standards compliant
  list.add(optionTag, null);
 }
 catch (err)
 {
  //IE
  list.add(optionTag);
 }

Answer 5

I would suggest using DOM-methods instead.

document.createElement('option') selectEl.appendChild()

Never had issues with that.

Answer 6

If you want to add an option to the start of the dropdown, the following variation should do it:

    try{
        list.add(optionTag, 0);
    } catch (err) {
        // Firefox is dumb for once: http://www.quirksmode.org/dom/w3c_html.html#selects
        list.add(optionTag, list.options[0]);
    }

Answer 7

This worked for me

$(selectID).append($('<option>'+display+'</option>').attr('value', value));