javascript Select2 Dropdown 动态添加、删除和刷新项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16426655/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select2 Dropdown Dynamically Add, Remove and Refresh Items from
提问by dotsa
This drives me crazy! Why cant Select2 implement clear methods or examples on their page how to do simple CRUD manipulation on Select2 :)
这让我发疯！为什么 Select2 不能在他们的页面上实现清晰的方法或示例如何在 Select2 上进行简单的 CRUD 操作:)
i have a select2 which gets data from a ajax call.
我有一个 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
});
Can some one provide a clear method how to delete and add an item from the Select2.
有人可以提供一种明确的方法如何从Select2中删除和添加一个项目。
For example:
例如：
I add an item via ajax call to db, and just want to append an option to Select2 and set it as selected.
我通过对 db 的 ajax 调用添加了一个项目，并且只想将一个选项附加到 Select2 并将其设置为选中。
I remove an item via ajax to db, and want to remove an option from Select2 and have no option selected.
我通过 ajax 删除了一个项目到 db，并想从 Select2 中删除一个选项并且没有选择任何选项。
回答by nKognito
From your example I can see that you attached Select2 plugin to hidden element. In addition you use Ajax call to populate results, so in this case if you need to add a new option to the list you simple call:
从您的示例中，我可以看到您将 Select2 插件附加到隐藏元素。此外，您使用 Ajax 调用来填充结果，因此在这种情况下，如果您需要向列表中添加一个新选项，您只需调用：
$('#valueg').select2('val', 'YOUR_VALUE');
In case of using select element as a container the only way that I found is to reinitialize plugin with new options... Something like this:
如果使用 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);
回答by Veeru
I had the same issue. This is how i solved it
我遇到过同样的问题。这就是我解决它的方法
This has nothing to do with select2, manipulating the itself seems to work for me
这与 select2 无关，操纵它本身似乎对我有用
$("#lstService").empty();
for(var i=0;i<data.length;i++){
$("#lstService").append('<option value="'+data[i].service_id+'">'+data[i].service_name+'</option>');
}
回答by ashraf aaref
I did it this way:
我是这样做的：
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
Hope that helps
希望有帮助
回答by Eloy Fernández Franco
It is too late... but this is my solution for people that still have this problem:
为时已晚......但这是我对仍然有这个问题的人的解决方案：
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);
回答by Forer
In my case, the key thing to add after manipulating the underlying select is:
就我而言，在操作底层选择后要添加的关键是：
$selectlist.trigger("change");//$selectlist is the underlying select element.
$selectlist.trigger("change");//$selectlist 是底层选择元素。
Select2 works around the change event on a select, so calling "change" updates the option displayed in the select 2.
Select2 处理选择上的更改事件，因此调用“更改”会更新选择 2 中显示的选项。
