2013-05-07 648 views
16

这让我疯狂!为什么不能Select2在他们的页面上实现清晰的方法或示例如何在Select2上执行简单的CRUD操作:)Select2 Dropdown动态添加,删除和刷新项目

我有一个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    
}); 

有人能提供清晰的方法如何删除,并从选择二加一项目。

例如:

我通过Ajax调用项目添加到数据库,只是想追加一个选项,选择二,并将其设置为选中状态。

我通过ajax删除一个项目到数据库,并且想要从Select2中删除一个选项并且没有选择任何选项。

回答

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

我有同样的问题。这是我如何解决它

这有什么好做选择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 

希望帮助

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

在我的情况下,操纵底层的选择后添加的关键是:

$ selectlist.trigger(“变”); // $ selectlist是底层的select元素。

Select2在select上的变化事件上工作,所以调用“change”更新select 2中显示的选项。