我有一个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
Set data in Select2 after insert with AJAX
$("#select2").select2('data',{id: newID,text: newText});