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

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

<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链接到可能的选项数据库，你可以看到需要两个字符的input。

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

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

但它不起作用。 相同的确切代码适用于非AJAX Select2框。 我试过了各种各样的select，比如使用$('#select2').select2("val", newID); 但它不起作用。

我甚至尝试完全删除Select2控件。 但是， $('#select2').remove()只会删除原来的<input>字段，但是让Select2控件留下来。 请注意，该页面有多个Select2控件，所以我不能使用Select2控件的类select器，因为它将删除我需要的其他控件。

任何想法如何a）dynamic地添加选项到使用AJAX的Select2控件; 或b）完全删除一个Select2控件，以便可以以编程方式添加回来？ 或者其他解决scheme…

编辑我发现另一个问题，显示如何删除一个select2元素，使用.select2（“销毁”）。 这在我看来是有效的，但在我看来是不理想的。 我更愿意能够添加选项而不是销毁并重新创buildselect2。

Answer 1

在select2 v4中开始这样做要容易得多。 您可以创build一个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="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> 

Answer 2

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

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

Answer 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'}]}); 

Answer 4

我已经解决了这个链接的帮助http://www.bootply.com/122726问题; 。 希望能帮助你

在select2 jquery中添加选项，并绑定你的ajax调用与创build的链接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> 

Answer 5

在Select2 4.0.2

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

Answer 6

扩展到有瑕疵的Q Bangwhistle的答案：

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

这会将新选项添加​​到<select>标签中，并让select2重新呈现它。

Answer 7

我这样做，这对我来说就像一个魅力。

 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 }) 

Answer 8

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