Chrome is really slow to empty my listbox via jquery

I allow a user to search a listbox which narrows results contained in said listbox.

The ajax request is fast to return the results and chrome is able to add the results quickly. The problem lies in the middle step where I actually empty the listbox.

Here's the code:

function PopulateListBox(data, listBox) {

    var options = '';
    if (data != null) {
        for (var i = 0; i < data.length; i++) {
            options += "<option value=\"" + data[i].Id + "\">" + data[i].Name + '开发者_StackOverflow社区</option>';
        }
    }
    listBox.empty().append(options);
}

where data is a JSON array and listbox is a a jquery selector with the ID for a listbox (the selector is by ID e.g. $('#listbox'). There are about 5-10k options in the listbox.

Firefox and even IE handle this well but Chrome is stuborn (what happened to the "fastest js engine" google??).

I'm using the latest jquery (1.5.1) and Chrome 11.0.696.3 dev. (I'm also using FF 3.6 and IE 8)

---

It might be faster to use the html() method instead of empty() followed by append():

listBox.html(options);

---

Out of curiosity did you try replaceWith? (docs here.) You'd need to have a div wrapping up your listBox, and that'd be the one you pass in to the PopulateListBox function. You'd also need to manually wrap the options variable with the listbox opening and closing tag info (shown below as pseudo html):

...
options = "<listbox tag>" + options + "</listbox tag>";
listBoxWrapperDiv.replaceWith(options);
...