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

前端之家收集整理的这篇文章主要介绍了动态添加项目到使用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链接到可能选项的数据库,并且您可以看到需要两个字符的输入。

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

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()只会删除原来的< input>字段,但使Select2控件保持不变。注意,页面有多个Select2控件,所以我不能使用Select2控件的类选择器,因为它会删除我需要的其他控件。

任何想法如何a)动态添加一个选项到使用AJAX的Select2控件;或b)完全删除一个Select2控件,以便它可以以编程方式添加回来?或任何其他解决方案…

编辑
我发现另一个问题,显示如何删除select2元素,使用.select2(“destroy”)。这是可行的,但在我看来,是次优的。我更喜欢能够添加选项比销毁和重新创建select2。

谢谢

bqb

这提供了一个简单的解决方案:
Set data in Select2 after insert with AJAX
$("#select2").select2('data',{id: newID,text: newText});

猜你在找的Ajax相关文章