这让我抓狂!为什么select2不能在他们的页面上实现清晰的方法或示例如何在Select2上进行简单的CRUD操作:)
我有一个select2,它从ajax调用中获取数据。
<input id="valueg" type="hidden" style="width: 300px;" data-placeholder="Select a Conference" />
$("#valueg").select2({
data: conferences,
allowClear: true,
initSelection: function (element, callback) {
var data = { id: element.val(), text: element.val() };
callback(data);
}
}).on("change", function (e) {
// show data in separate div when item is selected
});
有些人可以提供一种清晰的方法来从Select2中删除和添加项目。
例如:
我通过ajax调用向db添加一个项目,只想在Select2中附加一个选项并将其设置为选中。
我通过ajax将项目删除到db,并且想要从Select2中删除一个选项并且没有选择任何选项。
答案 0 :(得分:17)
从您的示例中我可以看到您将Select2插件附加到隐藏元素。此外,您使用Ajax调用来填充结果,因此在这种情况下,如果您需要向列表添加新选项,则可以简单地调用:
$('#valueg').select2('val', 'YOUR_VALUE');
如果使用select元素作为容器,我找到的唯一方法是使用新选项重新初始化插件......这样的事情:
var el = $('select[name="type"]', '#details-form');
var temp = el.select2('val'); // save current value
temp.push(NEW_VALUE); // append new one
var newOptions = '<option value="1">1</option><option value="2">2</option>';
el.select2('destroy').html(newOptions ).select2().select2('val', temp);
答案 1 :(得分:4)
我有同样的问题。这就是我解决它的方式
这与select2无关,操纵它本身似乎对我有用
$("#lstService").empty();
for(var i=0;i<data.length;i++){
$("#lstService").append('<option value="'+data[i].service_id+'">'+data[i].service_name+'</option>');
}
答案 2 :(得分:2)
我是这样做的:
var $select2 = $('#valueg').select2(); // getting the select2
var item = 'xyz'; // item to be added
$select2.val(function(i, val) { // val can take function as parameter
val = val || []; // if value is null init val as an array
val.push(item); // add the new item
return val;
}).trigger("change"); //refresh
希望有所帮助
答案 3 :(得分:0)
现在为时已晚......但对于仍有此问题的人来说,这是我的解决方案:
html = "";
jQuery("#select_2 option").each(function()
{
html += '<option value="'+jQuery(this).attr("value")+'">'+jQuery(this).text()+'</option>';
});
html += '<option value="NEWVALUE">NEW OPTION</option>';
jQuery("#select_2").html(html);
答案 4 :(得分:0)
在我的情况下,操作底层选择后添加的关键是:
$selectlist.trigger("change");
// $ selectlist是底层选择元素。
Select2适用于选择的更改事件,因此调用“更改”会更新选择2中显示的选项。