Can't set multiple values in Select2

Question

I am trying to show selected values in select2-jquery component.

var select = $(".select2").select2({
    multiple: true,
    placeholder: "",
    width:'100%',
    data: z 
});
var selectedValues = $("#sourceValues").val().split(',');

$.each( selectedValues, function(k,v){
    $(".select2").select2('val',v);
})

Element sourceValues holds the value e.g : 2,4 And z is array of object that holds id and text as suggested. I can see the <options> that is linked to the Select2 element but I am unable to show the selected values on the element. Also, If I try to run the query on Chrome console it works , if I write something like ;

  $(".select2").select2('val',4) 

Hence, the <option> with the id 4 is selected.

Answer 1

Select2 4.0 version in case someone needs:

var selectedValues = $("#sourceValues").val().split(',');
$(".select2").val(selectedValues).trigger("change");

Answer 2

Update (Select2 4.0+)

Since version 4.0, you should use .val(...) followed by trigger('change') from jQuery.

https://select2.org/programmatic-control/add-select-clear-items#selecting-options

Up-to-date example:

var selectedValues = $("#sourceValues").val().split(',');
$(".select2").val(selectedValues).trigger('change');

// $(".select2").val([1, 2]).trigger('change');

Original answer (Select2 3.5.3)

http://select2.github.io/select2/#documentation

val

Attached to select - Multi-Valued - Array of the value attributes of the options that should be selected. null for empty.

So:

var selectedValues = $("#sourceValues").val().split(',');
$(".select2").select2('val',selectedValues);

// $(".select2").select2('val',[1, 2]);