动态添加项目到使用AJAX的jQuery Select2控件中 [英] Dynamically add item to jQuery Select2 control that uses AJAX

问题描述

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

I have a jQuery Select2 control that uses AJAX to populate:

<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链接到可能选项的数据库，如您所见，需要输入两个字符.

The AJAX links to a database of possible options and as you can see requires two characters of input.

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

The problem is the user can use a dialog to add a new option if the option doesn't exist in the database. Upon return from that dialog, I try:

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);，但是它不起作用.

But it doesn't work. The same exact code works for non-AJAX Select2 boxes. I've tried various alternatives, like using $('#select2').select2("val", newID); but it doesn't work.

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

I've even tried completely deleting the Select2 control. However, $('#select2').remove() only removes the original <input> field but leaves the Select2 control lingering around. Note that the page has more than one Select2 control, so I can't use a class selector for Select2 controls as it will remove other controls that I need.

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

Any idea how to either a) dynamically add an option to a Select2 control that uses AJAX; or b) completely delete a Select2 control so that it can be programmatically added back? Or any other solution...

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

Edit I found another question that shows how to remove a select2 element, using .select2("destroy"). This works but is, in my opinion, sub-optimal. I would much prefer to be able to just add the option than to destroy and re-create the select2.

推荐答案

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

This provided a simple solution: Set data in Select2 after insert with AJAX

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

这篇关于动态添加项目到使用AJAX的jQuery Select2控件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！