Select2下拉列表动态添加，删除和刷新项目

Question

This drives me crazy! Why cant Select2 implement clear methods or examples on their page how to do simple CRUD manipulation on Select2 :)

i have a select2 which gets data from a ajax call.

<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.

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.

I remove an item via ajax to db, and want to remove an option from Select2 and have no option selected.

Answer 1

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:

$('#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:

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

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 5

In my case, the key thing to add after manipulating the underlying select is:

$selectlist.trigger("change"); //$selectlist is the underlying select element.

Select2 works around the change event on a select, so calling "change" updates the option displayed in the select 2.