动态添加项目到使用AJAX的jQuery Select2控件中

Question

我有一个使用AJAX填充的jQuery Select2控件：

<input type="text" name="select2" id="select2" style='width:400px' value="999">

var initialSelection = { id: '999', text:"Some initial option"};

$("#select2").select2({
    placeholder: "Select Option",
    minimumInputLength: 2,
    ajax: { 
        url: "/servletToGetMyData",
        dataType: 'json',
        data: function (term, page) { return { term: term }; },
        results: function (data, page) {  return { results: data.results} }
    },
    initSelection : function(element, callback){ callback(initialSelection); },     
    escapeMarkup: function (m) { return m; }
});

AJAX链接到可能选项的数据库，如您所见，需要输入两个字符。

问题是，如果数据库中不存在选项，则用户可以使用对话框来添加新选项。从该对话框返回后，我尝试：

var o = $("<option/>", {value: newID, text: newText});
$('#select2').append(o);
$('#select2 option[value="' + newID + '"]').prop('selected',true);
$('#select2').trigger('change');

但这是行不通的。相同的确切代码适用于非AJAX Select2盒。我尝试了各种替代方法，例如使用，$('#select2').select2("val", newID);但它不起作用。

我什至尝试完全删除Select2控件。但是，$('#select2').remove()仅删除原始的字段，而Select2控件仍然存在。请注意，该页面具有多个Select2控件，因此我不能对Select2控件使用类选择器，因为它将删除我需要的其他控件。

任何想法如何：a）向使用AJAX的Select2控件动态添加选项；或b）完全删除Select2控件，以便可以通过编程将其添加回去？或任何其他解决方案…

编辑 我发现了另一个问题，该问题显示了如何使用.select2（“
destroy”）删除select2元素。这有效，但我认为次优。我更希望能够仅添加选项，而不是销毁并重新创建select2。

Answer 1

这提供了一个简单的解决方案：使用AJAX插入后在Select2中设置数据

$("#select2").select2('data', {id: newID, text: newText});