Why does dynamically populating a select drop down list element using javascript not work in IE?

Question

I have a <select> element that I dynamically populate with different values at runtime.

I use the code below to clear the <option> elements and then reload it with new ones. It works in Firefox 3.6.6 and Chrome 5.0.

function loadPickerFromObject(pickerControl, values) {
    pickerControl.empty();
    for (var nameProperty in values) {
        if (!$.isFunction(values[nameProperty])) {
            var option = $("<option></option>")
                .text(values[nameProperty])
                .attr("value", nameProperty)
                .appendTo(pickerControl);
        }
    }
}

(I'm not fond of writing javascript and try to stay away from it, if there is a better way of dynamically populating a <select> element from the properties of an object please show how)

It doesn't work in IE 8. When I debug using Visual Studio I can see that the new items were loaded correctly, but when I check the page they're not updated and display the old items.

What's up with that? It should display the elements displayed in the Text Visualizer window (first screenshot). Why is it not showing the new values?

Answer 1

You can use the add() method. So your code would look like:

function loadPickerFromObject(pickerControl, values) {
    pickerControl.empty();
    for (var nameProperty in values) {
        if (!$.isFunction(values[nameProperty])) {
            pickerControl.add("<option></option>")
            .text(values[nameProperty])
            .attr("value", nameProperty);
        }
    }
}

Answer 2

Internet explorer likes to cache data.

Try CTRL + F5.

And you can use CTRL + SHIFT + DEL to bring up the dialog where you can clear the cache explicitly.

If this makes a difference you may want to think about adding headers in to try stop this from happening. For Example:

<META HTTP-EQUIV="cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

By the sounds of it your making ajax requests for data?
You can also try:

jQuery.ajaxSetup({ cache: false });

Answer 3

i think it would be even better if you will build one string of html and just append to the dom at the end. instead of manipulating the dom every time. something like this:

function loadPickerFromObject(pickerControl, values) {  
    pickerControl.empty();  
    var optionsHtml;

    for (var nameProperty in values) {  
        if (!$.isFunction(values[nameProperty])) {  
            optionsHtml += "<option value='" + nameProperty  + "'>" + 
                                values[nameProperty] + 
                           "</option>";
        }  
    }

    pickerControl.append(optionsHtml);

}

Answer 4

I took a look at the jQuery empty() function and it was calling removeChild internally. It seems that IE doesn't work reliably with removeChild called on a <select> element.

So I rewrote my loadPickerFromObject function to use the createElement, add and remove functions instead of jQuery's $([html]), appendTo and empty functions.

My code now works properly in Chrome, Firefox and IE.