jquery - How to append data into existing Select2

Question

After some research through several stackoverflow solutions, none of them helped my to solve this problem.

I have an initial data to populate a select2's input:

var select2_data = [{id:0, product_text:'text_1'},{id:1,product_text:'text_2'},{id:2, product_text:'text_3'}];

Then select2 is initiated without any problem.

var select2 = $('#select2_id').select2(
{
   id: function(e) {return e.product_text; },
   data:{results: select2_data, text:'product_text'},
       width: '50%',
   placeholder: 'Choose a product', 
   formatSelection: Product_Result,
   formatResult: Product_Result 
});

But my problem is I don't know how to append new data to this existing select2's input.

New data example:

var new_data = {id:4, product_text: 'text_4'};

I made some experiments trying to obtain the existing data and append into the existing data array like this:

var select2_existing_data = $('#select2_id').select2('data');
select2_existing_data.append(new_data);

But after some research this select2_existing_data variable is proper to returns just the selected data, not the entire data.

Hope you can help me to find the solution, Thanks

Answer 1

Is it not as simple as just appending to the original data array?

select2_data.push({ id: 4, product_text: 'text_4' });

Answer 2

I did something like this a while back...

//get the current data array (what is currently in the select 2)
var dataArray = $("#myselect2").select2('data');

//push your additional item
dataArray.push({ "Name": 'MyNewItem', "Id": 'MyNewItemId' });

//push new item with items that were already in the list
$("#myselect2").select2("data", dataArray);

Not tested. You might want to check select2('data') has items in it.