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

Posted 2023-05-07

【中文标题】如何使用 Select2.js 对从 Ajax 调用返回的数据进行多选结果？

【英文标题】：How to multi select results using Select2.js with data returned from Ajax call?

【发布时间】：2017-12-03 22:19:14

【问题描述】：

我有一个两个使用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 调用时，它就不再工作了。

【参考方案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();
);