以编程方式设置Select2 ajax的值 [英] Programmatically set the value of a Select2 ajax
问题描述
我有一个Select2自动完成输入（通过SonataAdmin构建），但在我的生活中无法弄清楚如何以编程方式将其设置为已知的键/值对。
I have a Select2 auto-complete input (built via SonataAdmin), but cannot for the life of me figure out how to programmatically set it to a known key/value pair.
这里有 JS小提琴，大致显示了我的内容。我想知道的是我可以附加到按钮的功能，以便
There's a JS Fiddle here that shows roughly what I have. What I want to know is what function I can attach to the button so that
- Select2字段显示文本NEW VALUE用户和
- 当表单发送到服务器时，Select2字段将提交值1
我尝试了各种jQuery和Select2 数据和 val 方法的组合页面上的各种输入，但似乎没有任何工作...当然有一些方法可以做到这一点？
I have tried all sorts of combinations of jQuery and Select2 data and val methods, called against various inputs on the page, but nothing seems to work... surely there's some way to do this?
- 编辑 -
下面接受的答案非常有用，有助于阐明初始化选择的正确方法并解释initSelection的用途。
The accepted answer below is very useful, helps shed some light on the right way to initialise the selection and explains what initSelection is for.
拥有据说，我最大的错误似乎是我试图触发变化的方式。
Having said that, it seems that my biggest mistake here was the way I was trying to trigger the change.
我使用的是：
$(element).select2('data', newObject).trigger('change');
但这导致空添加对象在select2的更改事件中。
But this results in an empty add object inside select2's change event.
如果您使用：
$(element).select2('data', newObject, true);
然后代码按原样运行， newObject 在select2的更改事件中可用且值设置正确。
then the code works as it should, with the newObject available in select2's change event and the values being set correctly.
我希望这些额外的信息可以帮助其他人！
I hope this extra information helps somebody else!
推荐答案
注意：问题和本答案适用于Select2 v3。 Select2 v4的API与v3完全不同。
我认为问题是 initSelection 函数。您是否使用该功能设置初始值？我知道Select2文档听起来像是它的目的，但它也说基本上这是一个id->对象映射函数，这不是你实现它的方式。
I think the problem is the initSelection function. Are you using that function to set the initial value? I know the Select2 documentation makes it sound like that is it's purpose, but it also says "Essentially this is an id->object mapping function," and that is not how you have implemented it.
由于某种原因，调用 .trigger（'change'）会导致 initSelection 函数get被调用，它将所选值更改回ENABLED_FROM_JS。
For some reason the call to .trigger('change') causes the initSelection function to get called, which changes the selected value back to "ENABLED_FROM_JS".
尝试删除 initSelection 函数和而是使用以下方式设置初始值：
Try getting rid of the initSelection function and instead set the initial value using:
autocompleteInput.select2('data', {id:103, label:'ENABLED_FROM_JS'});
注意：OP提供了 formatResult 和 formatSelection 选项。如提供的那样，那些回调函数期望项具有label属性，而不是text属性。 对于大多数用户来说，它应该是：
Note: The OP has supplied the formatResult and formatSelection options. As supplied, those callback functions expect the items to have a "label" property, rather than a "text" property. For most users, it should be:
autocompleteInput.select2('data', {id:103, text:'ENABLED_FROM_JS'});
的更多信息initSelection function：
More info on the initSelection function:
如果你搜索 Select2文档，您会看到当元素具有初始值并且元素的 .val（）时使用它函数被调用。这是因为这些值只包含 id ，而Select2需要整个数据对象（部分原因是它可以显示正确的标签）。
If you search through the Select2 documentation for "initSelection", you will see that it is used when the element has an initial value and when the element's .val() function is called. That is because those values consist of only an id and Select2 needs the entire data object (partly so it can display the correct label).
如果Select2控件显示静态列表， initSelection 函数将很容易编写（似乎Select2可以为您提供）。在这种情况下， initSelection 函数只需在数据列表中查找 id 并返回相应的数据宾语。 （我在这里说返回，但它并没有真正返回数据对象;它将它传递给回调函数。）
If the Select2 control was displaying a static list, the initSelection function would be easy to write (and it seems like Select2 could supply it for you). In that case, the initSelection function would just have to look up the id in the data list and return the corresponding data object. (I say "return" here, but it doesn't really return the data object; it passes it to a callback function.)
在你的情况下，你可能不喜欢不需要提供 initSelection 函数，因为你的元素没有初始值（在html中），你不会调用它的。 val（）方法。只需继续使用 .select2（'data'，...）方法以编程方式设置值。
In your case, you probably don't need to supply the initSelection function since your element does not have an initial value (in the html) and you are not going to call its .val() method. Just keep using the .select2('data', ...) method to set values programmatically.
如果你要为自动完成（使用ajax）提供 initSelection 函数，它可能需要进行ajax调用来构建数据对象。
If you were to supply an initSelection function for an autocomplete (that uses ajax), it would probably need to make an ajax call to build the data object.
这篇关于以编程方式设置Select2 ajax的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
