动态添加、删除和刷新Select2下拉框中的选项

Question

这让我发疯！为什么Select2不能实现清除方法或在其页面上提供有关如何对Select2进行简单CRUD操作的示例：）

我有一个从ajax调用中获取数据的select2。

<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调用向数据库添加一个项目，只想将选项附加到Select2并将其设置为已选择。

我通过ajax从数据库中删除一个项目，并希望从Select2中删除一个选项，并且没有选中任何选项。

- dotsa

Answer 1

根据您的示例，我可以看到您将 Select2 插件附加到了隐藏元素上。此外，您使用 Ajax 调用来填充结果，因此在这种情况下，如果您需要向列表中添加新选项，则只需调用：

$('#valueg').select2('val', 'YOUR_VALUE');

如果使用选择元素作为容器，则我发现唯一的方法是使用新选项重新初始化插件...类似这样：

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);

- nKognito

Answer 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

希望能对您有所帮助。

- ashraf aaref

---

多年以后，这是我唯一能让它正常工作的方法。谢谢。 - Watercayman

Answer 3

我有同样的问题。这是我解决的方法。

这与 select2 无关，操作 本身对我有效。

 $("#lstService").empty();
  for(var i=0;i<data.length;i++){
     $("#lstService").append('<option value="'+data[i].service_id+'">'+data[i].service_name+'</option>');
 }

- Veeru

Answer 4

在我的情况下，操作底层选择器后需要添加的关键内容是： $selectlist.trigger("change"); // $selectlist是底层选择器元素。

Select2围绕选择事件工作，在调用“change”时会更新在选择2中显示的选项。

- Forer

Answer 5

虽然有点晚了...但这是我为那些仍然遇到此问题的人提供的解决方案：

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);

- Eloy Fernández Franco