jQuery $ .each真的很慢

I am trying to build a dynamic combo box with $.each and $('<OPTION>'), but it is really slow on IE (takes 3/4 mins to render data after server response) on firefox and other browsers it's fine.

Here is my code that builds combo

var sel = ('#myDynCmb');
$.each(dataCollection, function(key,_value) {
    sel.append($("<OPTION>").val(key).text(_value));
});

Any help appreciated.

It could be a rendering issue on IE (usually slow on DOM manipulation).

You can try something like this:

var dummyList = $("<select />");
$.each(dataCollection, function(key,_value) {
    dummyList.append($("<option />").val(key).text(_value));
});
$('#myDynCmb').empty().append(dummyList.find('option'));

So you load the options into a dummy list (not in DOM), then you add all the elements into you list (in DOM).

Dom manipulation are usualy slow, especialy when you're appending to the dom.

One good practices is to put all your html into a var and append the content of this var to the dom, wich result in one dom opération, this is much faster

var htmlToAppend = "<select>";
$.each(dataCollection, function(key,_value) {
    select += "<option value="+key+">"+_value+"</option>";
});
htmlToAppend += "</select>";
$('#myDynCmb').empty().append(htmlToAppend);

Something like that

Try all the solutions but it was still embarrassingly slow so I have to switch it to classic javascript, new option, and it's now super fast