javascript - Select2 下拉列表动态添加、删除和刷新项目

Question

这让我发疯!为什么 Select2 不能在他们的页面上实现清晰的方法或示例如何在 Select2 上进行简单的 CRUD 操作 :)

我有一个 select2，它从 ajax 调用中获取数据。

<input id="valueg" type="hidden" style="width: 300px;" data-placeholder="Select a Conference" />

$("#valueg").select2({
             data: conferences,
             allowClear: true,
             initSelection: function (element, callback) {
                            var data = { id: element.val(), text: element.val() };
                            callback(data);
                        }
}).on("change", function (e) {
 // show data in separate div when item is selected               
});

有人可以提供一种清晰的方法来从 Select2 中删除和添加项目吗？

例如:

我通过对 db 的 ajax 调用添加一个项目，只想将一个选项附加到 Select2 并将其设置为选中。

我通过 ajax 将一个项目删除到数据库，并想从 Select2 中删除一个选项但没有选择任何选项。

Answer 1

从您的示例中我可以看到您将 Select2 插件附加到隐藏元素。此外，您还使用 Ajax 调用来填充结果，因此在这种情况下，如果您需要向列表中添加一个新选项，您只需调用:

$('#valueg').select2('val', 'YOUR_VALUE');

在使用 select 元素作为容器的情况下，我发现的唯一方法是使用新选项重新初始化插件......像这样:

var el = $('select[name="type"]', '#details-form');
var temp = el.select2('val'); // save current value
temp.push(NEW_VALUE); // append new one
var newOptions = '<option value="1">1</option><option value="2">2</option>';
el.select2('destroy').html(newOptions ).select2().select2('val', temp);