如何使用 Select2.js 对 Ajax 调用返回的数据进行多选结果?

Question

我有两个使用Select2.js的下拉列表。

第二个下拉列表将根据第一个下拉列表中的值启动 ajax 调用。

假设我已经从Ajax调用中获得所需的结果，并且我已经知道结果是什么，那就是值1276和1277。

我想要的是当我单击其中一个结果时，所有结果都将被选中。

正如我在Neelu的回答中读到的那样，这应该可以解决问题：

//this code block is outside the ajax call of select2.js
$('.select-2').on('select2:select', function() {
$('.select-2').val([1276,1277]);
$('.select-2').trigger("change");
});

结果不会反映在Select2元素中，但是当我使用.val()检查值时，我得到的结果1276并1277。

如果我触发不同的事件，我注意到了什么，例如button click获取 Select2 的值。那是它起作用的时候，但是当我触发另一个 Select2 ajax 调用时，它不会再次工作。

Answer 1

我找到了解决方案：

这是因为在 ajax 调用期间如果没有选定的options， 并且尚未生成option标签，因此Select2.js无法反映显示中的更改，即使.trigger('change')已经设置好了。

所以诀窍是，在 ajax 调用期间，一旦您收到响应，请创建一个option标签(就我而言，我已经知道响应将是两个值，我也想选择我选择的两个值(，因此我在 ajax 调用后创建两个option标签：

//..Ajax code response....
var selectElement = $(this)[0].$element[0];
processResults: function (data) {
$.each(data, function( k, v ) {
selectElement.innerHTML += '<option value="'+v.id+'">'+v.text+'</option>';
});
}

然后在 ajax 代码之外：

$('.select-2').on('select2:select', function() {
$('.select-2').val([1276,1277]).trigger("change");
});

如果要在取消选择其中一个时删除这两个选择，这就是技巧：

$('.select-2').on('select2:unselect', function() {
$('.select-2').val('').trigger("change");
//then destroy the option tag pre-created during ajax call
$('.select-2').empty();
});