CODEWITHSUNDEEP
javascript
Glenn
Glenn

Reputation: 8032

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

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?

Upvotes: 9

Views: 11242

Answers (10)

Chuck P
Chuck P

Reputation: 1

(edit: this doesn't work in IE, so it's not recommended.)

I do it by changing the innerHTML:

<select id="selectItem"></select>

var s=document.getElementById("selectItem");
s.innerHTML+="<option>apples</option>";
s.innerHTML+="<option>bananas</option>"; //(...etc)

Or put it in a loop if you are using an array to populate your dropdown list.

Upvotes: 0

Scott Evernden
Scott Evernden

Reputation: 39986

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

using the addOption function from the jQuery selectboxes plugin

Upvotes: 2

jishi
jishi

Reputation: 24634

I would suggest using DOM-methods instead.

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

Never had issues with that.

Upvotes: 2

simon
simon

Reputation: 12912

You shouldn't be using the Select.add method, as it's broken in IE, and there are better ways to add options dynamically (see http://msdn.microsoft.com/en-us/library/ms535921(VS.85).aspx)

I have had the same problem, and have found that the best way is to use the Node.insertBefore method. This has the advantage of working in all browsers, and making sorting of the elements easy, because you don't have to add the element as the last element of the select list in IE. For example, adding an option from one select list to another, so that the options in the target list are sorted alphabetically, can be done like this:

/*
adds an option to select element, alphabetically sorted according to the lower case value of the display element (option.text)
*/

function insertOptionToList(optionToInsert, targetSelectElement){

    for (var i=0;i<targetSelectElement.options.length;i++){
        var tempOptionText = targetSelectElement.options[i].text;
        if(tempOptionText.length>0 && optionToInsert.text.toLowerCase()<tempOptionText.toLowerCase()){
            targetSelectElement.insertBefore(optionToInsert,targetSelectElement[i]);
            return true;
        }
    }
    targetSelectElement.options[targetSelectElement.options.length] = optionToInsert;
    return true;                        
}

Upvotes: 2

Codemaster Dev
Codemaster Dev

Reputation: 11

I did some research myself using all permutations and combinations of creating an option object and I hope this is the best possible way by which we can add options to select in a browser neutral way:

function populateSelectField()
{

    document.frmMain.fldSelect.options.length = 0;
    document.frmMain.fldSelect.options[document.frmMain.fldSelect.options.length]=new Option("Your Value 1");
    document.frmMain.fldSelect.options[document.frmMain.fldSelect.options.length]=new Option("Your Value 2");
    document.frmMain.fldSelect.options[document.frmMain.fldSelect.options.length]=new Option("Your Value 3");
    document.frmMain.fldSelect.options[document.frmMain.fldSelect.options.length]=new Option("Your Value 4");
}

Since the select field object is accessed and manipulated by accessing it's parent object, which is "frmMain" (form) in this code, it doesn't create any problem for any browser to run the code.

This is supported by all browsers including IE.

Upvotes: 1

Gabo Esquivel
Gabo Esquivel

Reputation: 4012

This worked for me

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

Upvotes: 1

EoghanM
EoghanM

Reputation: 26954

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]);
    }

Upvotes: 0

Sanket
Sanket

Reputation: 463

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

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

Upvotes: 6

roenving
roenving

Reputation: 2646

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

Upvotes: -1

Elle H
Elle H

Reputation: 12237

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 :(

Upvotes: 12

Related Questions