How can I disable certain options with Select2 and remote data
In Select2 3.4.2 you just need to add a disabled: true
property to the given result object. Practical example with a query
function:
$('input').select2({
query: function(query) {
//do ajax call which retrieves the results array in this format:
var data = {results: [
{ id: 1, text: 'disabled option', disabled: true },
{ id: 1, text: 'hi' }
]};
//pass it to the query callback inside your Ajax callback:
query.callback(data);
}
});
Demo
The same can be done using the ajax
wrapper, which accepts a result objects array in the same format as the query
function.
Here's a demo with an actual Ajax call (through jsFiddle's JSON API):
$('input').select2({
ajax: {
url: '/echo/json/',
dataType: 'json',
params: {
method: 'post'
},
data: function (term, page) {
// Data to be sent to the server. Usually it is just the "term"
// parameter (and page if using pagination).
// However, since this API simply echoes back what we send,
// I'll build the results array here
var resultsArr = [];
for (var i = 0; i < 10; i++) {
resultsArr.push({
id: i,
text: 'opt'+i,
//randomly disable a couple options for demo purposes
disabled: Math.random() < .3
});
}
return {
json: JSON.stringify(resultsArr)
}
},
results: function(data, page) {
//data param === received response from the server. As dataType
//is json, jQuery automatically parses the response into an object.
//So, in this case, we received the resultsArr that we sent.
//Now return it in the correct format: { results: resultsArr }
return { results: data };
}
}
});
Demo
Remember that the data
function in this last example is just to properly use the jsFiddle API - you should keep your original data
function which sends the query term. All you have to do is modify the response so that the result objects include a disabled: true
property in the results that you want to be disabled, in the same format as the first example.
select2 can't change the server data, but you can change options before the result reloaded to the page
$('.input-selector').select2({
ajax: {
url: function (params) {
return '/to/url/resource.json';
},
processResults: function (data) {
var data_modified = $.map(data.results, function (obj) {
obj.disabled = true; // or use logical statement
return obj;
});
return { results: data_modified };
}
}
});