Bootstrap select loading takes too long in IE

Question

I'm loading 1000 records to a bootstrap select dropdownlist. It takes about 2 seconds in Chrome but takes 30 seconds in IE 9. Also, cancel or x out the bootstrap modal in IE takes 10+s too. The API call is ok but the rendering is so slow; Could some one give me some direction?

So I'm loading a list of customers and setting the selected. Here is the code.

    var customerPicker = $('#customer-picker');
    API.getCustomers().then(function (result) {
        loadDropdown(customerPicker, result.customers); 

        // set the selected to current customer; it takes 10s in IE
        customerPicker.val(currentCustomerId).selectpicker('refresh'); 

        // it takes about 10s in IE too. selector is the bs modal div
        $(selector).css('z-index', '1060').modal('show'); 
    }).catch(function (errorMessage) {
        ToastManager.showError(errorMessage || 'An error occurred while loading customer list. Please try again.');
    });

    function loadDropdown($div, arr) {
        var options = '';
        $.each(arr, function (i, item) {
            options = options + '<option value="' + item.Value + '">' + item.Text + '</option>';
        });
        $div.html(options);
    }

Answer 1

Have you tried setting the innerHTML inside of the loop;

 $div[0].innerHTML += '<option value="' + item.Value + '">' + item.Text + '</option>';

Instead of this at the end.;

 $div.html(options);