Select2 Dropdown 动态添加、删除和刷新项目

Posted

技术标签:

【中文标题】Select2 Dropdown 动态添加、删除和刷新项目【英文标题】:Select2 Dropdown Dynamically Add, Remove and Refresh Items from 【发布时间】:2013-05-01 20:32:28 【问题描述】:

这让我发疯!为什么 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 调用向 db 添加一个项目,并且只想将一个选项附加到 Select2 并将其设置为选中。

我通过 ajax 将一个项目删除到 db,并希望从 Select2 中删除一个选项并且没有选择任何选项。

【问题讨论】:

【参考方案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);

【讨论】:

【参考方案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】:

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

这与select2无关,操纵本身似乎对我有用

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

【讨论】:

【参考方案4】:

在我的例子中,在操作底层选择之后要添加的关键是:

$selectlist.trigger("change"); //$selectlist 是底层的选择元素。

Select2 可以解决 select 上的 change 事件,因此调用“change”会更新 select 2 中显示的选项。

【讨论】:

【参考方案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);

【讨论】:

以上是关于Select2 Dropdown 动态添加、删除和刷新项目的主要内容,如果未能解决你的问题,请参考以下文章

Select2-Ajax获取数据

如何将唯一 ID 添加到 select2 下拉列表

如何在 React JS-Functional 组件中使用“Select-Drop down”、“Text Field”、“Text-Area auto size”添加和删除动态行

动态添加部分视图后如何重新初始化JQuery

使用格式动态设置 select2 选项

从 select2 列表中删除旧的选定值