我将<input type="hidden">
转换为select2下拉列表,并通过query方法向其提供数据
$('#inputhidden').select2({
query: function( query ) {
query.callback( data ); // the data is in the format select2 expects and all works well..
);
});
问题是我需要破解select2 UI,并在搜索栏顶部放置两个按钮,当单击这些按钮时,将执行 AJAX 调用,并必须更新select2内容。
现在,我需要在不完全重建select2的情况下进行这些更新,而只是刷新下拉列表中的项目。我找不到一种方法来将一组新数据传递给一个已经创建的select2控件,这可能吗?
9条答案
按热度按时间wgx48brx1#
选择2版本3.x
如果你有带选项的本地数组(通过 AJAX 调用接收),我认为你应该使用
data
参数作为返回选择框结果的函数:小提琴:* 一个月一次 *
如果您使用按钮自定义select 2接口,只需在更新数据数组(示例中为pills)后调用
updateResults
(此方法不允许从select 2对象的外部调用,但如果需要,您可以将其添加到select 2中的allowedMethods
数组)方法。选择2版本4:定制数据适配器
自定义数据适配器与额外的
updateOptions
(不清楚为什么原始ArrayAdapter
缺乏此功能)方法可用于动态更新选项列表(本例中的所有选项):小提琴:* 一个月一次 *
选择2版本4: AJAX 传输函数
在v4中,您可以定义可以使用本地数据数组自定义传输方法(例如thx @Caleb_Kiage,我使用过它,但没有成功)
文件:https://select2.github.io/options.html#can-an-ajax-plugin-other-than-jqueryajax-be-used
Select 2使用 AJAX .transport中定义的传输方法向您的API发送请求。默认情况下,此传输方法为jQuery.ajax,但可以更改。
型
但是使用此方法,如果数组中的选项文本更改,则需要更改选项的ID-内部select 2 dom选项元素列表未修改。如果数组中的选项ID保持不变-将显示以前保存的选项,而不是从数组更新!如果仅通过向其添加新项来修改数组,则没有问题-对于大多数常见情况,可以。
*小提琴:**https://jsfiddle.net/xu48n36c/3/ *
pgpifvop2#
我想直接把资料交上去就够了:
注意,第二个参数似乎指示需要刷新。
感谢@Bergi的帮助。
如果它不能自动更新,你可以尝试直接调用它的updateResults方法。
或者通过向“input.select2-input”发送一个触发器来间接触发它,如下所示:
型
vlju58qv3#
将Select 2 4.0与Meteor配合使用,您可以执行以下操作:
发生了什么:
1.呈现模板时...
1.使用会话中的数据初始化select 2控件。
1.@autorun(this.autorun)函数在每次Session.get(“select 2Data”)的值改变时运行。
1.每当会话更改时,请清除现有的select 2选项,然后使用新数据重新创建。
这适用于任何React式数据源--例如Collection.find().fetch()--而不仅仅是Session.get()。
注意:从Select 2 4.0版开始,您必须先移除现有选项才能添加新选项。请参阅此GitHub问题了解详细信息。没有方法可以在不清除现有选项的情况下“更新选项”。
以上是coffeescript,与Javascript非常相似。
2exbekwf4#
试试这个:
yqyhoc1h5#
ars1skjm6#
我通过使用 AJAX 选项并指定一个自定义传输函数解决了这个问题。
下面是相关的js让它工作。
hgqdbh6s7#
据我所知,如果不刷新整个列表或输入一些搜索文本并使用查询函数,就不可能更新select2选项。
这些按钮是用来做什么的?如果它们是用来确定选择选项的,为什么不把它们放在选择框之外,让它们以编程的方式设置选择框数据,然后打开它呢?我不明白为什么要把它们放在搜索框的顶部。如果用户不应该搜索,你可以使用minimumResultsForSearch选项来隐藏搜索功能。
编辑:这个怎么样...
超文本标记语言:
Javascript语言
示例:Plunker
**编辑2:**这至少会让它更新列表,但是如果您在触发
keyup-change
事件之前输入了搜索文本,仍然会有一些奇怪的地方。yizd12fk8#
适用于选择2 4.X
4ioopgfo9#
Diego对answer given by SpinyMan的评论很重要,因为
empty()
方法将删除select2示例,因此任何自定义选项都将不再保留。如果您想保留现有的select2选项,则必须保存它们,销毁现有的select2示例,然后重新初始化。您可以这样做:我建议总是显式地传递select2选项,因为上面只复制简单的选项,而不是任何定制的回调或适配器,还要注意这需要select2的最新稳定版本(在本文发表时是4.0.13)。
我编写了泛型函数来处理这个问题,其中包含一些特性: