在IE8中处理Select2中多个选项的选择-性能问题

Question

I have added a Select all / deselect all wrapper round a Select2 multi select control.

It works by looping through the options, pushing the values into an array then passing the array to the selct2 val as follows:

mySelect2.select2("val", mySelectedValuesArray);

This works fine in Chrome and in cases where there are not so many options to be selected. But in IE8 where they might be 100+ options the browser freezes as it attempts to render the selected values and I get multiple Stop Running this Script? alerts. I have had similar problems with IE8 when using expandable text boxes where the browser freezes whenever it has to increase the height of the textbox and assume its a quirk of the IE rendering engine. Anyway, in this case it renders the page unusable whenever you select all with anything more than 30 or 40 options.

I have tried creating the markup for the selected options container manually so as to just add it in one go, but, aside form then having to manually wire up the click events on each one to be able top remove them, Im finding when the selects change event fires it, select2 ends up removing the options anyway and i cant find a way round this.

Any ideas?

As an update here is my code

$(".filterIconContainer .filtericon").on("click",function () {
    var $this = $(this);
    var $associatedSelect = $("#" + $this.attr("data-associated-select"));
    if ($associatedSelect.length == 0) {
        $associatedSelect = $("#filterContainer div[data-tabid='" + $("#filterTabs li.active").attr("id") + "'] select");
    }

    if ($this.attr("data-action") == "select") {
        var selected = [];
        $associatedSelect.find("option").each(function (i, e) {
           selected.push($(e).attr("value"));
        });

       setTimeout(function() {
           $associatedSelect.select2("val", selected); // Browser throws stop running this script alert during select2 processing this line
           $associatedSelect.change(); // call the change event to force any post change action
       },5);
    }
    else {
       $associatedSelect.select2('val', '');
       $associatedSelect.change(); // call the change event to force any post change action
    }
});

Answer 1

In the end I fixed this by making a change to the select2.js file

$(data).each(function () {
    var i = this;
    setTimeout(function () {
        self.addSelectedChoice(i);
    }, 0);
});

Wrapping the call to addSelectedChoice in a setTimeout allows IE to render the change without throwing a slow running script error.