如何使用带有Ajax调用返回的数据的Select2.js多个选择结果？

Question

我有一个2下拉列表，它使用Select2.js。

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

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

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

正如我在Neelu's answer中所读到的那样，这将起到以下作用：

//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标记，那么即使已经设置了.trigger('change')，Select2.js也不能反映显示中的更改。

所以诀窍是，在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();
});