无法使用 Select2 以编程方式选择选项

Posted 2023-05-07

【中文标题】无法使用 Select2 以编程方式选择选项

【英文标题】：Can't programmatically select option using Select2

【发布时间】：2014-09-27 12:32:15

【问题描述】：

我有一个 Select2 工作正常附加到一个选择列表，但是当有人输入一个新项目并且我重新绑定选择列表并尝试以编程方式选择新项目时，它拒绝显示。 还有许多其他帖子，但他们的解决方案对我不起作用。

使用.select2("val", value)。什么也没做。 使用.select2("data", value)。什么也没做。不知道这应该如何不同。 使用InitSelection 选项设置一个值。这会导致以下错误消息：Uncaught Error: Option 'initSelection' is not allowed for Select2 when attached to a select element。

在将新选项添加​​到数据库后的Ajax成功函数中，我有以下javascript：

BindDishes(RestaurantID); //rebinds the select list successfully
$('#hidDishID').val = data.DishID; //populates a hidden field
var arr = '[id: "' + data.DishID + '", text: "' + data.DishName + '"]'; 
$("#dd").select2("data", arr);

所以在这个最新的迭代中，我尝试按照另一个建议的解决方案从选择列表项中提供一个包含 id 和文本的数组，但仍然没有任何反应。我究竟做错了什么？将 Select2 与选择列表一起使用时这是不可能的吗？

编辑：我在 MVC 中有以下行来创建选择列表：

@html.DropDownGroupListFor(m => m.DishID, Model.GroupedSelectList, "Select a dish", new  id="dd",style="width:470px;" )

这一定是通过从模型绑定到 DishID 引起的，该模型在来自服务器时最初是空白的。 DropDownGroupListFor 只是一个 HTML 帮助器，它允许在 Select 中使用 OptionGroups，但它必须是有问题的绑定。这里最好的方法是什么，以不同的方式绑定或以某种方式更新模型的 DishID，不确定最佳实践？

【问题讨论】：

.select2("val", value) 为我工作。你能提供一个最小的完整复制吗？

添加了一个编辑以突出问题必须是什么 - 如果 .select("val", value) 完成了这项工作，那么它必须被描述的绑定覆盖，只是不确定最好的一般接近

$('#hidDishID').val = data.DishID; 这看起来不对。可以试试改成$('#hidDishID').val(data.DishID);吗？

感谢 Chips，它现在确实正确填充了隐藏字段，它不会影响主要问题，因为该字段尚未使用

Select2 完全在客户端发生。 @Html.DropDownGroupListFor() 完全发生在服务器上。他们不做绑定，至少不在同一个上下文中。他们不应该互动。这纯粹是一种方式的交流。 Select2 仅在服务器端处理完成后调用。

【参考方案1】：

var $example = $(".js-example-programmatic").select2();
$example.val("CA").trigger("change"); 

【参考方案2】：

您需要在添加/修改项目之前销毁您的 select2。如果你这样做了，那么你的 select2 将像第一次绑定一样响应

Select2 Dropdown Dynamically Add, Remove and Refresh Items from