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

【问题标题】：Dynamically add item to jQuery Select2 control that uses AJAX将项目动态添加到使用 AJAX 的 jQuery Select2 控件
【发布时间】：2014-10-15 04:57:29
【问题描述】：

我有一个使用 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。

【问题讨论】：

插件版本不好说？

标签： jquery ajax jquery-select2

【解决方案1】：

从 select2 v4 开始，这要容易得多。您可以创建一个new Option，并将其直接附加到select 元素。请参阅我的codepen 或以下示例：

$(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”。然后尝试添加一些新值。

【讨论】：

它有效，但问题是当我更改选项时，新添加的选项消失了
这是要走的路。 TLDR：$("#my_select").append(new Option("Label", "value", true, true));
@alexw append 此方法对单个选择框非常有效，但不适用于多选。你能建议吗？
它可以工作，但我们如何将其他数据添加到选择选项中？
@alexw。是否可以通过这种方式传递额外的 HTML 代码？

【解决方案2】：

这提供了一个简单的解决方案： Set data in Select2 after insert with AJAX

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

【讨论】：

此解决方案不适用于选择多个，只需添加所选项目，但不在选项列表中。
它在多选下拉列表中不起作用，它既没有显示为已选中，也没有出现在选项列表中。
这适用于旧版本的 Select2。对于版本 4，请参阅 alexw 的答案。

【解决方案3】：

如果是 Select2 版本 4+

它已经改变了语法，你需要这样写：

// clear all option
$('#select_with_blank_data').html('').select2({data: [{id: '', text: ''}]});

// clear and add new option
$("#select_with_data").html('').select2({data: [
 {id: '', text: ''},
 {id: '1', text: 'Facebook'},
 {id: '2', text: 'Youtube'},
 {id: '3', text: 'Instagram'},
 {id: '4', text: 'Pinterest'}]});



//  append option
$("#select_with_data").append('<option value="5">Twitter</option>');
$("#select_with_data").val('5');
$("#select_with_data").trigger('change');

【讨论】：

这是“记录在案”，因为在 select2 代码中不再可能。如果您在 select2 构造函数中设置 'debug:true'，您将收到警告：“Select2：无法再使用 select2("data") 设置数据。您应该考虑使用 $element.val() 设置值。”

【解决方案4】：

在 Select2 4.0.2 中

$("#yourId").append("<option value='"+item+"' selected>"+item+"</option>");
$('#yourId').trigger('change');

【讨论】：

有时我希望我有更多的时间来开发 select2 的替代方案......我不敢相信这适用于多个选项，而我必须为单个选项做的完全不同.. .thanks @Digvijay
仅供参考，今天仍在使用 4.0.6 测试和需要... THX

【解决方案5】：

我已在此链接 http://www.bootply.com/122726 的帮助下解决了问题。希望能帮到你

在 select2 jquery 中添加选项并将您的 ajax 调用与创建的链接 id(#addNew) 绑定以获取来自后端的新选项。和代码

 $.getScript('http://ivaynberg.github.io/select2/select2-3.4.5/select2.js',function(){

  $("#mySel").select2({
    width:'240px',
    allowClear:true,
    formatNoMatches: function(term) {
        /* customize the no matches output */
        return "<input class='form-control' id='newTerm' value='"+term+"'><a href='#' id='addNew' class='btn btn-default'>Create</a>"
    }
  })
  .parent().find('.select2-with-searchbox').on('click','#addNew',function(){
    /* add the new term */
    var newTerm = $('#newTerm').val();
    //alert('adding:'+newTerm);
    $('<option>'+newTerm+'</option>').appendTo('#mySel');
    $('#mySel').select2('val',newTerm); // select the new term
    $("#mySel").select2('close');       // close the dropdown
  })

});



<div class="container">
    <h3>Select2 - Add new term when no search matches</h3>
    <select id="mySel">
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
        <option>Four</option>
        <option>Five</option>
        <option>Six</option>
        <option>Twenty Four</option>
    </select>
    <br>
    <br>
</div>

【讨论】：

请至少分享您在链接后面找到的内容的摘要。以防链接将来停止工作。
select2 javascript修改并准备更新答案
有机会升级选择 2 版本 4.0 的当前代码。当前示例代码中断。谢谢
@Suneel 为您提供的解决方案正在创建问题，在添加下拉列表prntscr.com/a1r0b1

【解决方案6】：

扩展 Bumptious Q Bangwhistle 的回答：

$('#select2').append($('<option>', { 
    value: item,
    text : item 
})).select2();

这会将新选项添加到 <select> 标记中，并让 select2 重新渲染它。

【讨论】：

【解决方案7】：

$("#my_select").select2('destroy').empty().select2({data: [{id: 1, text: "new_item"}]});

【讨论】：

请为您的回答提供更多信息。解释可能会有所帮助。

【解决方案8】：

我是这样做的，它对我很有用。

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, 

    text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

    $(".js-example-data-array").select2({
      data: data
    })

【讨论】：

【解决方案9】：

要让动态标记与 ajax 一起使用，我就是这样做的。

Select2 3.5 版

这在 3.5 版中很容易，因为它提供了createSearchChoice 挂钩。只要设置了multiple: true 和tags: true，它甚至可以用于多选。

HTML

<input type="hidden" name="locations" value="Whistler, BC" />

JS

$('input[name="locations"]').select2({
  tags: true,
  multiple: true,
  createSearchChoice: function(term, data) {
    if (!data.length)
      return { id: term, text: term };
    },
  ajax: {
    url: '/api/v1.1/locations',
    dataType: 'json'
  }
});

这里的想法是使用 select2 的 createSearchChoice 钩子，它将用户输入的 term 和 ajax 响应（如 data）传递给您。如果 ajax 返回一个空列表，则告诉 select2 提供用户输入的 term 作为选项。

演示：https://johnny.netlify.com/select2-examples/version3

Select2 版本 4.X

版本 4.X 不再有 createSearchChoice 挂钩，但我是这样做的。

HTML

  <select name="locations" multiple>
    <option value="Whistler, BC" selected>Whistler, BC</option>
  </select>

JS

$('select[name="locations"]').select2({
  ajax: {
    url: '/api/v1.1/locations',
    dataType: 'json',
    data: function(params) {
      this.data('term', params.term);
      return params;
    },
    processResults: function(data) {
      if (data.length)
        return {
          results: data
        };
      else
        return {
          results: [{ id: this.$element.data('term'), text: this.$element.data('term') }]
        };
    }
  }
});

想法是将用户输入到 jQuery 数据存储中的术语隐藏在 select2 的 data 挂钩中。然后在select2的processResults钩子中，检查ajax响应是否为空。如果是，我会抓取用户键入的隐藏术语并将其作为选项返回给 select2。

演示：https://johnny.netlify.com/select2-examples/version4

【讨论】：