以编程方式设置Select2 ajax的值
我有一个Select2自动完成输入（通过SonataAdmin构建），但在我的生活中无法弄清楚如何以编程方式将其设置为已知的键/值对。
这里有一个JS小提琴 ，大致显示了我的内容。 我想知道的是我可以将哪些function附加到按钮上
- Select2字段向用户显示文本“NEW VALUE”，和
- 将表单发送到服务器时，Select2字段将提交值“1”
我已经尝试了jQuery和Select2 data和val方法的各种组合，在页面上针对各种输入调用，但似乎没有任何工作……当然有一些方法可以做到这一点？
– 编辑 –
下面接受的答案非常有用，有助于阐明初始化选择的正确方法，并解释initSelection的用途。
话虽如此，我最大的错误似乎是我试图触发变化的方式。
我用的是：
$(element).select2('data', newObject).trigger('change');
但是这会导致select2的change事件中出现一个空的add对象。
相反，如果您使用：
$(element).select2('data', newObject, true);
然后代码按原样运行， newObject在select2的change事件中可用，并且值正确设置。
我希望这些额外的信息可以帮助别人！
注意：问题和本答案适用于Select2 v3。 Select2 v4的API与v3截然不同。
我认为问题是initSelection函数。 您是否使用该function设置初始值？ 我知道Select2文档听起来像是它的目的，但它也说“基本上这是一个id->对象映射函数”，这不是你如何实现它。
由于某种原因，调用.trigger('change')会导致调用initSelection函数，从而将所选值更改回“ENABLED_FROM_JS”。
尝试删除initSelection函数，而是使用以下命令设置初始值：
autocompleteInput.select2('data', {id:103, label:'ENABLED_FROM_JS'});
的jsfiddle
注意：OP提供了formatResult和formatSelection选项。 如提供的那样，那些回调函数期望项具有“label”属性，而不是“text”属性。 对于大多数用户，它应该是：
autocompleteInput.select2('data', {id:103, text:'ENABLED_FROM_JS'});
有关initSelection函数的更多信息：
如果您在Select2文档中搜索“initSelection”，您将看到在元素具有初始值以及调用元素的.val()函数时使用它。 这是因为这些值只包含一个id而Select2需要整个数据对象（部分原因是它可以显示正确的标签）。
如果Select2控件显示静态列表， initSelection函数将很容易编写（似乎Select2可以为您提供）。 在这种情况下， initSelection函数只需要在数据列表中查找id并返回相应的数据对象。 （我在这里说“返回”，但它并没有真正返回数据对象;它将它传递给回调函数。）
在您的情况下，您可能不需要提供initSelection函数，因为您的元素没有初始值（在html中），并且您不会调用其.val()方法。 只需继续使用.select2('data', ...)方法以编程方式设置值。
如果要为自动完成（使用ajax）提供initSelection函数，则可能需要进行ajax调用以构建数据对象。
请注意，这是使用版本4+测试的
在找到这个讨论后我终于能够取得进展： https ： //groups.google.com/forum/#！topic / select2 / TOh3T0yqYr4
最后一条评论指出了我能够成功使用的方法。
例：
$("#selectelement").select2("trigger", "select", { data: { id: "5" } });
这似乎足以使其与ajax数据匹配，并正确设置值。 这极大地帮助了自定义数据适配器。
要设置初始值，您需要使用jQuery将必要的选项标签添加到select元素，然后使用select2的val方法定义这些选项，最后触发select2的’change’事件。
1.-$('#selectElement').append(''); 2.-$('#selectElement').select2('val', someID, true);
第三个布尔参数告诉select2触发change事件。
有关详细信息，请参阅https://github.com/select2/select2/issues/3057
好心，“validation”评论中有一个错误。
autocompleteInput.select2('data', {id:103, label:'ENABLED_FROM_JS'});
正确的方法是
autocompleteInput.select2('data', {id:103, text:'ENABLED_FROM_JS'});
使用text而不是label
从他们的例子https://select2.github.io/examples.html
程序化访问：
var $example = $(".js-example-programmatic").select2(); var $exampleMulti = $(".js-example-programmatic-multi").select2(); $(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); }); $(".js-programmatic-open").on("click", function () { $example.select2("open"); }); $(".js-programmatic-close").on("click", function () { $example.select2("close"); }); $(".js-programmatic-init").on("click", function () { $example.select2(); }); $(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); }); $(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); }); $(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });
如果从你的小提琴中删除.trigger('change') ，它会记录Object {id: 1, label: "NEW VALUE"} （需要点击两次，因为记录在值更改之前）。 这就是你要找的东西吗？
使用带有多个选项的select2时，请使用以下结构：
$(element).select2("data", $(element).select2("data").concat(newObject), true);
jquery select2 多 集 串联
就是这个：
$("#tag").select2('data', { id:8, title: "Hello!"});
使用Select2版本4+，您实际上没有什么特别需要做的。 最后带有’change’事件触发器的标准jQuery将起作用。
var $select = $("#field"); var items = {id: 1, text: "Name"}; // From AJAX etc var data = $select.val() || []; // If you want to merge with existing $(items).each(function () { if(!$select.find("option[value='" + this.id + "']").length) { $select.append(new Option(this.text, this.id, true, true)); } data.push(this.id); }); $select.val(data).trigger('change'); // Standard event notifies select2
Select2文档中有一个基本示例： https ： //select2.org/programmatic-control/add-select-clear-items
对于版本3.5.3
$(".select2").select2('data',{id:taskid,text:taskname}).trigger('change');
基于John S的回答 。 只有在初始化select2时initSelection选项未初始化时，上述内容才有效。
$(".select2").select2({ //some setup })
您所要做的就是设置值，然后执行： $ ('#myselect').select2 (); 或$ ('select').select2 (); 。 一切都很好地更新了。