Adding select element through javascript doesn't work in ie

Question

my code works fine in Safari, and FF, but in IE the drop down is empty. Its just empty. Any ideas? This is jquery-1.5. Thanks!

var sel = document.createElement("select");
sel.setAttribute("id", key)
sel.setAttribute('name', key)
for (var option in ddHash[key]){
    var optElement = document.createElement("option")
    optElement.text = ddHash[key][option]
    if (// some conditional){
        optElement.selected = true
    }
    else {
        optElement.selected = false
    }
    sel.appendChild(optElement)
}

If you're using jQuery, why not [use jQuery methods](http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery)? — Cheran Shunmugavel, Apr 28 '11 at 05:40

score 1 · Answer 1 · answered Apr 27 '11 at 21:10

1

I believe optElement.text should be optElement.innerText for IE.

answered Apr 27 '11 at 21:10

mattsven

22,305
11
68
104

score 0 · Answer 2 · answered Apr 28 '11 at 05:38

From the MSDN reference for the option object:

You can create new OPTION elements dynamically with the document.createElement method, but you cannot change properties until the new element is added to a SELECT object. Or, you can create fully formed elements by using the Option object, as follows:
var opt = new Option( 'Text', 'Value', fDefaultSelected );

So it seems you just need to call appendChild before trying to set the properties.

Adding select element through javascript doesn't work in ie

2 Answers2