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

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.