选择2 v3.x
如果您有带有选项的本地数组(通过ajax调用接收),我认为您应该使用data
参数作为返回选择框结果的函数:
var pills = [{id:0, text: "red"}, {id:1, text: "blue"}];
$('#selectpill').select2({
placeholder: "Select a pill",
data: function() { return {results: pills}; }
});
$('#uppercase').click(function() {
$.each(pills, function(idx, val) {
pills[idx].text = val.text.toUpperCase();
});
});
$('#newresults').click(function() {
pills = [{id:0, text: "white"}, {id:1, text: "black"}];
});
FIDDLE:http://jsfiddle.net/RVnfn/576/
如果您使用按钮自定义select2界面,只需在更新数据数组(示例中的pills)后调用updateResults
方法即可。请注意,这个方法不允许从select2对象的外部调用,但是如果需要,您可以将它添加到allowedMethods
数组中。
select2 v4:自定义数据适配器
使用具有附加的updateOptions
方法的自定义数据适配器(原始的ArrayAdapter
为什么缺少此功能尚不清楚),可以动态更新选项列表(此示例中的所有选项):
$.fn.select2.amd.define('select2/data/customAdapter',
['select2/data/array', 'select2/utils'],
function (ArrayAdapter, Utils) {
function CustomDataAdapter ($element, options) {
CustomDataAdapter.__super__.constructor.call(this, $element, options);
}
Utils.Extend(CustomDataAdapter, ArrayAdapter);
CustomDataAdapter.prototype.updateOptions = function (data) {
this.$element.find('option').remove();
this.addOptions(this.convertToOptions(data));
}
return CustomDataAdapter;
}
);
var customAdapter = $.fn.select2.amd.require('select2/data/customAdapter');
var sel = $('select').select2({
dataAdapter: customAdapter,
data: pills
});
$('#uppercase').click(function() {
$.each(pills, function(idx, val) {
pills[idx].text = val.text.toUpperCase();
});
sel.data('select2').dataAdapter.updateOptions(pills);
});
FIDDLE: https://jsfiddle.net/xu48n36c/1/
select2 v4: ajax transport function
v4中,你可以定义自定义的传输方法,并且可以使用本地数据数组来工作(感谢 @Caleb_Kiage 示例,我已经尝试过了,但没有成功)
文档:https://select2.github.io/options.html#can-an-ajax-plugin-other-than-jqueryajax-be-used
Select2 使用在 ajax.transport 中定义的传输方法向您的 API 发送请求。默认情况下,此传输方法是 jQuery.ajax,但可以更改。
$('select').select2({
ajax: {
transport: function(params, success, failure) {
var items = pills;
if (params.data && params.data.q) {
items = items.filter(function(item) {
return new RegExp(params.data.q).test(item.text);
});
}
var promise = new Promise(function(resolve, reject) {
resolve({results: items});
});
promise.then(success);
promise.catch(failure);
}
}
});
但是,使用这种方法,如果选项的文本在数组中发生更改,则需要更改选项的ID - 内部的select2 dom选项元素列表不会被修改。如果选项的ID保持不变,则将显示先前保存的选项,而不是来自数组的更新选项!如果仅通过向其中添加新项目来修改数组,那么这不是问题-对于大多数常见情况都可以接受。
FIDDLE:https://jsfiddle.net/xu48n36c/3/