[英]How can I disable certain options with Select2 and remote data
Select2 supports disabled options when it is initialized on a <select>
tag, as discussed in this issue Select2 在
<select>
标签上初始化时支持禁用的选项,如本期所述
However, I can't find how to achieve the same result with remote data.但是,我找不到如何使用远程数据实现相同的结果。 Do I need to use a custom format function?
我需要使用自定义格式功能吗? How do I prevent the user from selecting it then?
我如何防止用户选择它呢? Or is this built-in somewhere?
或者这是内置的?
Thanks!谢谢!
In Select2 3.4.2 you just need to add a disabled: true
property to the given result object.在 Select2 3.4.2 中,您只需要向给定的结果对象添加一个
disabled: true
属性。 Practical example with a query
function:具有
query
功能的实际示例:
$('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);
}
});
The same can be done using the ajax
wrapper, which accepts a result objects array in the same format as the query
function.使用
ajax
包装器也可以做到这一点,它接受与query
函数格式相同的结果对象数组。
Here's a demo with an actual Ajax call (through jsFiddle's JSON API):这是一个带有实际 Ajax 调用的演示(通过 jsFiddle 的 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 };
}
}
});
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.请记住,最后一个示例中的
data
函数只是为了正确使用 jsFiddle API - 您应该保留发送查询词的原始data
函数。 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.您所要做的就是修改响应,以便结果对象在要
disabled: true
的结果中包含一个disabled: true
属性,格式与第一个示例相同。
select2 can't change the server data, but you can change options before the result reloaded to the page select2 不能更改服务器数据,但您可以在结果重新加载到页面之前更改选项
$('.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 };
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.