Select2 Dropdown Dynamically Add, Remove and Refresh Items from

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.