如何以编程方式更改 select2 值

Posted 2023-05-07

【中文标题】如何以编程方式更改 select2 值

【英文标题】：how to change select2 value programmatically

【发布时间】：2016-12-10 21:55:17

【问题描述】：

我在引导模式中有一个 select2 框，我想更改 select2 框的值，但它不起作用。

我在之前的帖子和结果中尝试了每一个解决方案，但都没有成功。

我用select2 4.0.2，我测试过：

$('#select_id').val('val').trigger('change.select2');

$('#select_id').val('val').trigger('change');

$('#select_id').val('val').change()

它工作一两次然后它停止工作（随机）

---

只有当我将 select2 改回 3.x.x 时它才能正常工作

【参考方案1】：

$('#select_id').val('val').trigger('change');

是正确的方法，见here

【讨论】：

只有在执行 select2 之前更改所选值时才有效

提醒一下：在使用 .trigger('change') 时，您可以通过在事件名称中添加 .select2 命名空间来限制更改事件的范围。例如。 .trigger('change.select2')。您可以使用它来防止多次触发更改事件。有关更多信息，请参阅 select2 文档：select2.org/programmatic-control/…

【参考方案2】：

$('#select_id').select2('val', selectedValue);

【讨论】：

没用，收到“在未使用 Select2 的元素上调用了 select2('val') 方法”。我们需要更好地记录这个简单的更改任务

嗯，那个“错误”消息很清楚：你还没有初始化 select2 但正在尝试设置一个值。在以前版本的插件中，你可以同时做这两件事，但现在你不能。

如果我首先初始化它返回“未定义”并且选择值设置为空。但是，使用 .val('xx').trigger('change') 它可以工作。我从 select2 示例网站上的控制台尝试过： $('.js-example-basic-single.js-states').select2('val', 'CA') 返回 undefined 和 $('.js-example- basic-single.js-states').val('CA').trigger('change') 工作

.val 是 jQuery 方法，而不是 select2。 .select2('val', myValue) 是一个 void select2 方法，这就是你得到这些不同结果的原因。

【参考方案3】：

对于带有 Ajax 调用的 Select2，我有很多选择，但没有一个有效。然后我来到了以下解决方案，它就像魅力一样 $("#select_id").html($("").val('val').text('text')).trigger("change");

【参考方案4】：

要以编程方式为 Select2 控件选择选项/项目，请使用 jQuery

$('#mySelect2').val('1'); // Select the option with a value of '1'
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed

您也可以将数组传递给 val 进行多项选择：

$('#mySelect2').val(['1', '2']);
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed

【参考方案5】：

如果您像我一样为 select2:selecting 事件添加了自定义处理程序，那么更改值和触发自定义 select2 事件的正确完整答案是：

$('#select_id').val('val').trigger('change').trigger(
     type: 'select2:event_name', // It worked for me with select2:selecting and select2:select
     params: 
       args:  // Only use 'args' if using select2:selecting, select2:select does not use it
         data: varWithEventData
       
     
);

【参考方案6】：

对于遇到此类问题的人：

如果您使用多个选择元素并且有一个公共事件处理程序（例如 $(".mySelect2Inputs").click(...) ），那么当您执行 $('#mySelect2').trigger('change') 时，点击事件处理程序将触发多次（$(".mySelect2Inputs").length 次）。

为了防止这种情况，你必须使用$('#mySelect2').trigger('change.select2')（注意.select2命名空间！）。

来自 select2 文档： https://select2.org/programmatic-control/events#limiting-the-scope-of-the-change-event

其他组件侦听更改事件或附加可能有副作用的自定义事件处理程序是很常见的。要将范围限制为仅通知 Select2 更改，请使用 .select2 事件命名空间：

$('#mySelect2').val('US'); // Change the value or make some change to the internal state $('#mySelect2').trigger('change.select2'); // Notify only Select2 of changes