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

我有一个使用 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 控件，以便可以通过编程方式将其添加回来？或者任何其他解决方案...

Edit我发现另一个问题显示如何使用 .select2("destroy") 删除 select2 元素。这可行，但在我看来，这并不是最理想的。我更希望能够仅添加该选项，而不是销毁并重新创建 select2。

从 select2 v4 开始，这要容易得多。您可以创建一个new Option，并将其附加到select直接元素。看我的codepen http://codepen.io/alexweissman/pen/zremOV或下面的例子：

$(document).ready(function() {
    $("#state").select2({
      tags: true
    });
      
    $("#btn-add-state").on("click", function(){
      var newStateVal = $("#new-state").val();
      // Set the value, creating a new option if necessary
      if ($("#state").find("option[value=" + newStateVal + "]").length) {
        $("#state").val(newStateVal).trigger("change");
      } else { 
        // Create the DOM option that is pre-selected by default
        var newState = new Option(newStateVal, newStateVal, true, true);
        // Append it to the select
        $("#state").append(newState).trigger('change');
      } 
    });  
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>


<select id="state" class="js-example-basic-single" type="text" style="width:90%">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>
<br>
<br>
<input id="new-state" type="text" />
<button type="button" id="btn-add-state">Set state value</button>

提示：尝试在文本框中输入现有值，例如“AL”或“WY”。然后尝试添加一些新值。