cap*_*ica 29 javascript jquery jquery-select2 sonata-admin
我有一个Select2自动完成输入(通过SonataAdmin构建),但在我的生活中无法弄清楚如何以编程方式将其设置为已知的键/值对.
这里有一个JS小提琴,大致显示了我的内容.我想知道的是我可以将哪些功能附加到按钮上
我已经尝试了jQuery和Select2 data以及val方法的各种组合,在页面上针对各种输入调用,但似乎没有任何工作......当然有一些方法可以做到这一点？
- 编辑 -
下面接受的答案非常有用,有助于阐明初始化选择的正确方法,并解释initSelection的用途.
话虽如此,我最大的错误似乎是我试图触发变化的方式.
我用的是:
$(element).select2('data', newObject).trigger('change');
但是这会导致addselect2的change事件中出现一个空对象.
相反,如果您使用:
$(element).select2('data', newObject, true);
那么代码可以正常工作,newObject可以在select2的change事件中使用,并且值正确设置.
我希望这些额外的信息可以帮助别人!
Mar*_*ark 41
请注意,这是使用版本4+测试的
在找到此讨论后,我终于能够取得进展:https://groups.google.com/forum/#!topic / select2/TOh3T0yqYr4
最后一条评论指出了我能够成功使用的方法.
例:
$("#selectelement").select2("trigger", "select", {
data: { id: "5" }
});
这似乎足以使其与ajax数据匹配,并正确设置值.这极大地帮助了自定义数据适配器.
Joh*_*n S 27
注意:问题和本答案适用于Select2 v3.Select2 v4的API与v3完全不同.
我认为问题在于initSelection功能.您是否使用该功能设置初始值？我知道Select2文档听起来像是它的目的,但它也说"基本上这是一个id->对象映射函数",这不是你如何实现它.
由于某种原因,调用.trigger('change')导致initSelection函数被调用,这会将所选值更改回"ENABLED_FROM_JS".
尝试摆脱该initSelection功能,而是使用以下方法设置初始值:
autocompleteInput.select2('data', {id:103, label:'ENABLED_FROM_JS'});
注意: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', ...)方法以编程方式设置值.
如果您要initSelection为自动完成(使用ajax)提供函数,则可能需要进行ajax调用来构建数据对象.
小智 10
要设置初始值,您需要使用jQuery将必要的选项标签添加到select元素,然后使用select2的val方法定义这些选项,最后触发select2的'change'事件.
1.-$('#selectElement').append('<option value=someID>optionText</option>');
2.-$('#selectElement').select2('val', someID, true);
第三个布尔参数告诉select2触发change事件.
有关详细信息,请参阅https://github.com/select2/select2/issues/3057
好心,"验证"评论中有错误.
autocompleteInput.select2('data', {id:103, label:'ENABLED_FROM_JS'});
正确的方法是
autocompleteInput.select2('data', {id:103, text:'ENABLED_FROM_JS'});
用text而不是label
使用 Select2 版本 4+，实际上您不需要做任何特别的事情。最后带有“更改”事件触发器的标准 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