I am dealing with a complex control that contains 10 to 12 select2 dropdowns. These dropdowns need to be initialized as select2 dropdowns, and when they are opened, an ajax call is made to load data. The issue arises when specific data is loaded from the server - in this case, the drop-down should become a multiple select2.
Below is a snippet of the code:
$selectDropDown.select2({
ajax: {
url: '/GetValues',
dataType: 'json',
data: function (params) {
var query = {
title: name,
}
return query;
},
processResults: function (data) {
if (data.type === '10') {
// Code to make it multiple select goes here
return {results: data.results};
} else {
var values = getDefaultDataItems();
return {results: values };
}
}
},
allowClear: true,
placeholder: 'Select values'
width: '100%',
});
The data cannot be loaded before initialization of select2 due to optimization reasons.
Currently, it functions like this:
processResults: function (data) {
if (data.type === '10') {
// A workaround approach
$selectDropDown.select2({
multiple: 'multiple',
data: data.results
}).select2('open');
} else {
var values = getDefaultDataItems();
return {results: values };
}
}
I would like to inquire if this is the best way to handle this situation? Is there a built-in functionality for this?