I'm trying to add items to a select drop down at run time. So far it's working in Firefox and Opera, but it doesn't seem to work in IE7 or 8.

What is supposed to happen is that when a user selects a center, then the personnel drop down gets populated with the personnel at the center....

//Clear out the all of the exisiting items
if (document.getElementById("ddlPersonnel").hasChildNodes) {
    while (document.getElementById("ddlPersonnel").childNodes.length > 0) {
        document.getElementById("ddlPersonnel").removeChild(document.getElementById("ddlPersonnel").firstChild);
    }
}

//Add the "Select Personnel" option
var FirstOpt = document.createElement('OPTION');
FirstOpt.value = "";
FirstOpt.innerText = "Select Personnel";
alert("blah1");
document.getElementById("ddlPersonnel").options.add(FirstOpt, null);    //It dies here with a "Type Mismatch" error
alert("blah2");

It dies on the line between the two alerts with a "Type Mismatch" error.

I'm trying to add items to a select drop down at run time. So far it's working in Firefox and Opera, but it doesn't seem to work in IE7 or 8.

What is supposed to happen is that when a user selects a center, then the personnel drop down gets populated with the personnel at the center....

//Clear out the all of the exisiting items
if (document.getElementById("ddlPersonnel").hasChildNodes) {
    while (document.getElementById("ddlPersonnel").childNodes.length > 0) {
        document.getElementById("ddlPersonnel").removeChild(document.getElementById("ddlPersonnel").firstChild);
    }
}

//Add the "Select Personnel" option
var FirstOpt = document.createElement('OPTION');
FirstOpt.value = "";
FirstOpt.innerText = "Select Personnel";
alert("blah1");
document.getElementById("ddlPersonnel").options.add(FirstOpt, null);    //It dies here with a "Type Mismatch" error
alert("blah2");

It dies on the line between the two alerts with a "Type Mismatch" error.

• javascript
• html

• Just a note that you can clear out a dropdown aka <select> with myDropDown.options.length = 0; instead of looping through the elements. I'm using this technique on IE6, FF, Chrome, Safari and Opera. – John Farrell Commented Aug 28, 2009 at 13:48

3 Answers 3

Use new Option instead of createElement.

var sel = document.getElementById("ddlPersonnel");
var opt = sel.options;
opt[opt.length] = new Option("Label","Value")

(That should work, but I haven't tested it)

Just replace

document.getElementById("ddlPersonnel").options.add(FirstOpt, null);

by

document.getElementById("ddlPersonnel").add(FirstOpt);

Removing the ".options" and the ", null" in the add() function will do the trick

In my experience, replacing append() which is jQuery with the pure JavaScript appendChild() method resulted in my items appearing in the select box.