Loading data from Ajax takes time

[avtarsm]

Hi, I am using the multiple select for country, state and city dropdown. The city dropdown takes around 15 to 20 seconds to load the data. The average city data items would be around 300.

$country.multipleSelect({
    filter: true,
    selectAll: false,
    onClick: function (view) {
        jQuery.ajax({
            url: "state_url",
            data: {'q' : $country.multipleSelect('getSelects') },
            type: "GET",
            dataType: "JSON",
            success: function (data) {
                $state.empty();
                $.each(data, function (id, name) {
                    var $stateOption = $('<option />', {
                        value: name.id,
                        text: name.name
                    })
                    $state.append($stateOption).multipleSelect('refresh');
                });
            }
        });
    },
});
$state.multipleSelect({
    filter: true,
    selectAll: false,
    onClick: function (view) {
        jQuery.ajax({
            url: "city_url",
            data: {'q' : $state.multipleSelect('getSelects') },
            type: "GET",
            dataType: "JSON",
            success: function (data) {
                $city.empty();
                $.each(data, function (id, name) {
                    var $cityOption = $('<option />', {
                        value: name.id,
                        text: name.name
                    })
                    $city.append($cityOption).multipleSelect('refresh');
                });
            }
        });
    },
});

$city.multipleSelect({
    filter: true,
});

[avtarsm]

It was my mistake, I was refreshing the multiselect in the loop, it should be:

$country.multipleSelect({ filter: true, selectAll: false, onClick: function (view) { jQuery.ajax({ url: "state_url", data: {'q' : $country.multipleSelect('getSelects') }, type: "GET", dataType: "JSON", success: function (data) { $state.empty(); $.each(data, function (id, name) { var $stateOption = $('', { value: name.id, text: name.name }) $state.append($stateOption); }); $state.multipleSelect('refresh'); } }); }, }); $state.multipleSelect({ filter: true, selectAll: false, onClick: function (view) { jQuery.ajax({ url: "city_url", data: {'q' : $state.multipleSelect('getSelects') }, type: "GET", dataType: "JSON", success: function (data) { $city.empty(); $.each(data, function (id, name) { var $cityOption = $('', { value: name.id, text: name.name }) $city.append($cityOption); }); $city.multipleSelect('refresh'); } }); }, });