我需要在初始化select2后设置一个数据数组。所以我想做这样的事情:
var select = $('#select').select2({});
select.data([
{id: 1, text: 'value1'},
{id: 1, text: 'value1'}
]);
但是我收到以下错误:
当附加到元素时,Select2不允许使用选项'data'。;
我的HTML:
<select id="select" class="chzn-select"></select>
我应该使用什么而不是选择元素?
我需要设置搜索项目的来源
答案 0 :(得分:21)
在onload中:
$.each(data, function(index, value) {
$('#selectId').append(
'<option value="' + data[index].id + '">' + data[index].value1 + '</option>'
);
});
答案 1 :(得分:11)
创建一个<input type="hidden">
元素并将select2绑定到该元素。在常规选择框中使用.select2不允许您使用数据,它主要为您提供UI和选择后方法。
答案 2 :(得分:4)
来源:https://select2.org/programmatic-control/add-select-clear-items
添加项目:
var data = {
id: 1,
text: 'Barn owl'
};
var newOption = new Option(data.text, data.id, false, false);
$('#mySelect2').append(newOption).trigger('change');
清除项目:
$('#mySelect2').val(null).trigger('change');
答案 3 :(得分:1)
对于v4,您必须使用更新的数据销毁和重建select2。查看https://github.com/select2/select2/issues/2830
答案 4 :(得分:1)
我最近有这样的场景,即更改一个select2对象会改变第二个(有效的父子组)的内容。我使用ajax调用来检索一组新的Json数据,然后由第二个select2对象拾取。我已经包含了以下代码:
$("#group").on('change', function () {
var uri = "/Url/RetrieveNewResults";
$.ajax({
url: uri,
data: {
format: 'json',
Id: $("#group :selected").val()
},
type: "POST",
success: function (data) {
$("#groupchild").html('');
$("#groupchild").select2({
data: data,
theme: 'bootstrap',
placeholder: "Select a Type"
});
},
error: function () {
console.log("Error")
}
});
});
我发现我必须包含$(“#groupchild”)。html('')才能清除第二个select2中的前一组数据。希望这会有所帮助。
答案 5 :(得分:0)
这就是我所做的。
Select2.prototype.setAjax = function (ajaxOptions)
{
// Set the new ajax properties
var oAjaxOpts = this.options.get('ajax');
if (oAjaxOpts != undefined && oAjaxOpts != null)
{
for (var sKey in ajaxOptions)
{
oAjaxOpts[sKey] = ajaxOptions[sKey];
}
}
var DataAdapter = this.options.get('dataAdapter');
this.dataAdapter = new DataAdapter(this.$element, this.options);
}
jHtmlFrag.select2({
dropdownParent: $(oData.jDiv),
placeholder: "Select Option",
allowClear: true,
minimumInputLength: 2,
ajax: {
url: "",
method: "POST",
dataType: 'json',
delay: 250,
processResults: function (oResults, params)
{
let page = params.page || 1;
// console.log(oResults, (params.page * 10));
return {
results: oResults.data,
pagination: {
more: (page * 10) < oResults.recordsFiltered
}
};
}
}
}).val(null).trigger('change');
jCombo.select2('setAjax', {
url: sUrl,
data: function (params)
{
let query = {
search: params.term,
type: params._type,
page: params.page || 1,
}
return query;
},
});
答案 6 :(得分:0)
您可以重新渲染并触发select2
渲染选择2
$('.select2').select2({
placeholder: 'Slect value',
allowClear: true
});
需要更改数据data
let dataChange = [
{
id: 0,
text: 'enhancement'
},
{
id: 1,
text: 'bug'
},
{
id: 2,
text: 'duplicate'
},
{
id: 3,
text: 'invalid'
},
{
id: 4,
text: 'wontfix'
}
];
重新渲染select2
$('.select2').select2('destroy');
$('.select2').empty();
$('.select2').select2({
placeholder: 'Slect value',
allowClear: true,
data: dataChange
});
触发select2
$('.select2').trigger('change');
希望这是您的答案:3