Slow creating Select List with Ajax in ie 8

Question

I'm creating a select List from a getJson call.

in firefox / chrome the select list is generated very quickly but in ie (tested in ie8) it takes some seconds to create the options.

There is approx 2000 options being added to the select list

My code is below

function getPractitioners(practID, selectID) {
    selectID = '#' + selectID;
    $.getJSON("/practitioner/getPractitioners", { practID: practID }, function (fooList) {
        $(selectID).empty();
        $.each(fooList, function (i, foo) {
            if (foo.profID == practID) {
                $(selectID).append(('<option value=\'' + foo.profID + '\' selected=\'selected\'>' + foo.display + '</option>'));
                }
            else
            {
                $(selectID).append(('<option value=\'' + foo.profID + '\' >' + foo.display + '</option>'));
            }
        });
        $(selectID).trigger("liszt:updated");
    });
}

Can anybody suggest anything to improve this?

Previously I was adding the options like

$(selectID).append(("<option></option>").attr("value", foo.profID).attr("selected", "selected").text(foo.display));

but changing this did not improve the performance.

Thank you in advance.

I'd suggest not having a select with 2000 options, if at all possible. — Kevin B, May 20 '13 at 15:42
Also try not to append them in each to reduce the number of DOM operations. instead construct the options and do a .html(options) in the end. — PSL, May 20 '13 at 15:44
@KevinB Im with you on that kevin! Unfortunatly its for a customer who require the 2000 in a list! Im using the chosen Select plugin which makes searching the select very easy. The unfortunate thing is I demoed it in Chrome and they only have ie8 available! — Andy Marsden, May 20 '13 at 15:44
IE is usually slow in DOM operation, take a look here: http://stackoverflow.com/questions/16033271/jquery-each-is-really-slow/16033501#16033501 — Irvin Dominin, May 20 '13 at 15:47
@PSL very good idea ill give that a go, that should defiantly improve the performance. — Andy Marsden, May 20 '13 at 15:51
@AndyMarsden You'll have to explain to your client that having a select with 2000 options is going to perform poorly in IE8, and offer solutions, such as instead using an autocomplete box, or having another select that will filter the larger select down to a smaller subset of options. — Kevin B, May 20 '13 at 15:51
@Edward Thanks I struggled to find a similar question, if i get to the bottom of it ill update that question also. — Andy Marsden, May 20 '13 at 15:52
@AndyMarsden as @@kevin suggests autocomplete dropdown would be a better option apart from perfomance, a select with huge xitems could be a bad user Xp to find out the option they want out of it. — PSL, May 20 '13 at 15:58
@PSL im using the chosen plugin (http://harvesthq.github.io/chosen/) which allows for searching the select list which really helps them find the option. If the suggestions dont work I will prob implemet an autocomplete search jobby. Thanks for the prompt responses. — Andy Marsden, May 20 '13 at 16:01

score 2 · Accepted Answer · answered May 20 '13 at 15:50

2

Use a string and append once at the end of the loop to reduce the amount of dom manipulations you are doing.

var options = '';
$.each(fooList, function (i, foo) {
    options += '<option value=\'' + foo.profID + '\' >' + foo.display + '</option>';        
});
$(selectID).html(options).val(practID).trigger("liszt:updated");

answered May 20 '13 at 15:50

wirey00

33,517
7
54
65

Wirey beat me to it but this would be the way to tackle it. I built quite a few plugins and always avoid jquery objects until really needed. it can improve performance greatly. may want to consider intervals as well if the answer doesn't do the trick. Essentially adding the options in stages. – origin1tech May 20 '13 at 15:53
This works brilliantly, also cuts out alot of code with the .val() – Andy Marsden May 21 '13 at 21:48

Andy Marsden · Answer 2 · 2013-10-08T20:48:14.473

0

This plugin https://github.com/harvesthq/chosen/pull/1339 resloves the exact issue that I have been having with the chosen plugin.

edited Oct 08 '13 at 20:48

answered Oct 03 '13 at 12:30

Andy Marsden

95
1
6

score 0 · Answer 3 · edited Nov 02 '13 at 02:30

I have the same issue. I improve performance by manipulating selected attribute after appending all options.

//slow --- append selected value in each apppend.
$.each(fooList, function (i, foo) {
    $(selectID).append(('<option value="XXX" selected>yyyy</option>'));
});

//fast --- manipulating selected attribute after append to DOM
$.each(fooList, function (i, foo) {
    $(selectID).append(('<option value="XXX">yyyy</option>'));
});
$(selectID).find("option").attr("selected", "selected");

But I don't know why this workaround works well.

Slow creating Select List with Ajax in ie 8

3 Answers3