我有一个Select2自动完成输入(通过SonataAdmin构建),但在我的生活中无法弄清楚如何以编程方式将其设置为已知的键/值对。
有a JS Fiddle here大致显示我有什么。我想知道的是我可以将哪些功能附加到按钮上
我已经尝试了jQuery和Select2 data
和val
方法的各种组合,在页面上针对各种输入调用,但似乎没有任何工作......当然有一些方法可以做到这一点?
- 编辑 -
下面接受的答案非常有用,有助于阐明初始化选择的正确方法,并解释initSelection的用途。
话虽如此,我最大的错误似乎是我试图触发变化的方式。
我用的是:
$(element).select2('data', newObject).trigger('change');
但这导致select2的更改事件中的空add
对象。
相反,如果您使用:
$(element).select2('data', newObject, true);
那么代码可以正常工作,在select2的更改事件中可以使用newObject
并正确设置值。
我希望这些额外的信息可以帮助别人!
注意:问题和本答案适用于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 documentation中搜索“initSelection”,您将看到在元素具有初始值并且调用元素的.val()
函数时使用它。那是因为这些值只包含id
而Select2需要整个数据对象(部分原因是它可以显示正确的标签)。
如果Select2控件显示静态列表,initSelection
函数将很容易编写(似乎Select2可以为您提供)。在这种情况下,initSelection
函数只需要在数据列表中查找id
并返回相应的数据对象。 (我在这里说“返回”,但它并没有真正返回数据对象;它将它传递给回调函数。)
在你的情况下,你可能不需要提供initSelection
函数,因为你的元素没有初始值(在html中),你不会调用它的.val()
方法。只需继续使用.select2('data', ...)
方法以编程方式设置值。
如果你要为自动完成(使用ajax)提供initSelection
函数,它可能需要进行ajax调用来构建数据对象。
对于版本3.5.3
$(".select2").select2('data',{id:taskid,text:taskname}).trigger('change');
基于John S' answer 。只有在初始化select2时,上述内容才有效,但initSelection
选项未初始化。
$(".select2").select2({
//some setup
})
您所要做的就是设置值,然后执行:$ ('#myselect').select2 ();
或$ ('select').select2 ();
。一切都很好地更新了。
对于仍在使用3.5或更高版本的用户。请确保您如何将select2.js引用到您的页面。如果您使用的是异步或延迟加载。此插件可能表现不同。
想提一下。
在我的情况下,我能够使用PHP将预选选项呈现到HTML服务器端。
在我的页面加载期间,我已经知道选项值,所以我的<select name="team_search"></select>
成为以下;
<select name="team_search">
<?php echo !empty($preselected_team)
? '<option selected="selected" value="'. $preselected_team->ID .'">' . $preselected_team->team_name . '</option>'
: null ?>
</select>';
如你所见,当我有一个$preselected_team
可用时,我使用selected
属性,value
和标签集在一个选项中渲染。并且,如果我没有值,则不会呈现选项。
这种方法可能并不总是可行的(并且在未提及OP的情况下),但它确实带来了在JavaScript执行之前准备好页面加载的额外好处。
请注意,这是使用版本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('<option value=someID>optionText</option>');
2.-$('#selectElement').select2('val', someID, true);
第三个布尔参数告诉select2触发change事件。
小心,“验证”评论中有错误。
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);
就是这个:
$("#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