使用 jQuery 的 select2 向多选添加值

Posted 2023-05-07

【中文标题】使用 jQuery 的 select2 向多选添加值

【英文标题】：Adding values to a multiple select with jQuery's select2

【发布时间】：2013-05-30 16:15:30

【问题描述】：

我在<select> 和multiple="multiple" 上使用select2 jQuery 插件。我需要将值添加到所选列表（即不是所有选项，而是所选选项，而不添加新选项）。

我知道我可以使用this 设置选定的选项：

$("#the_select").select2("val", "the_option_value"); 

或者，多选：

$("#the_select").select2("val", ["an_option_value","another_option_value"]); 

但是，有没有一种方法可以将 选定的选项 添加到列表中（即选择一个选项）而不删除其他选项？

【参考方案1】：

你应该可以使用这个：

$("#the_select").append($('<option>', value:"NEWVAL", text: "New Option Text"));

它将新的选项项附加到列表的末尾。

HTH

编辑

Take 2 :) - 我在 select2 页面上的 chrome 开发工具中尝试了这个。它有效（我添加了“WA”并且出现了Washington。

var selectedItems = $("#the_select").select2("val");
selectedItems.push("NEWITEMVAL");   // I used "WA" here to test.
$("#the_select").select2("val", selectedItems);

或作为一个班轮：

$("#the_select").select2("val", $("#the_select").select2("val").concat("NEWITEMVAL"));

【讨论】：

抱歉造成误会。我不想添加选项，我想选择一个选项。另外，我怀疑这在不重新初始化 select2 插件的情况下是否可行。

为什么投反对票？您确实声明“我需要向所选列表添加值”。 :-) 而且它可以在不重新初始化插件的情况下工作。试试看。

选中，而不是select。此外，如果您查看过代码，您会看到我正在更改值（因此选择了一次）而不是选择的选项。它可能有效，它没有按照我的要求做，所以它不是我问题的答案。我会改写它以使其更清楚。

谢谢，这就是我要找的。但是有没有select2 的命令可以做到这一点，这样我就不需要三行了？

太棒了——这样更好！ select2 上似乎没有任何东西可以做到这一点 - (github.com/ivaynberg/select2/blob/master/select2.js#L3011)。如果您真的愿意，您可以随时自行扩展插件。

【参考方案2】：

这就是我的做法：

      $("#the-select")
        .val($("#the-select")
          .val()
          .concat([array_of_existing_values]));
      $("#the-select")
        .trigger("change");

HTH