CODEWITHSUNDEEP
javascriptjqueryselectinternet-explorer-8
John Mills
John Mills

Reputation: 10263

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

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.

alt text alt text

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?

Upvotes: 1

Views: 4114

Answers (5)

Graham King
Graham King

Reputation: 436

GiddyUpHorsey is correct, the problem is with removeChild. There is a very easy way to clear a select though.

mySelect.options.length = 0

So you could do this:

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

Upvotes: 0

John Mills
John Mills

Reputation: 10263

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.

Upvotes: 1

Guy Schaller
Guy Schaller

Reputation: 4700

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

}

Upvotes: 0

Sphvn
Sphvn

Reputation: 5353

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

Upvotes: 0

Marko
Marko

Reputation: 72230

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

Upvotes: 0

Related Questions