我有一个使用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("val", newID);
我什至尝试完全删除Select2控件。但是,$('#select2').remove()仅删除原始的字段,而Select2控件仍然存在。请注意,该页面具有多个Select2控件,因此我不能对Select2控件使用类选择器,因为它将删除我需要的其他控件。
$('#select2').remove()
任何想法如何:a)向使用AJAX的Select2控件动态添加选项;或b)完全删除Select2控件,以便可以通过编程将其添加回去?或任何其他解决方案…
编辑 我发现了另一个问题,该问题显示了如何使用.select2(“ destroy”)删除select2元素。这有效,但我认为次优。我更希望能够仅添加选项,而不是销毁并重新创建select2。
这提供了一个简单的解决方案:使用AJAX插入后在Select2中设置数据
$("#select2").select2('data', {id: newID, text: newText});