how to change select2 value programmatically

Question

I have a select2 box in bootstrap modal, I want to change the value of the select2 box but it didn't work.

I tried every single solution in previous posts and results but none of them got it work.

I use select2 4.0.2, I tested:

$('#select_id').val('val').trigger('change.select2');

$('#select_id').val('val').trigger('change');

$('#select_id').val('val').change()

It works one or two times then it stops working (randomly)

---

It works fine only when I change the select2 back to 3.x.x

Answer 1

$('#select_id').val('val').trigger('change');

is the right way, see here

Answer 2

$('#select_id').select2('val', selectedValue);

Answer 3

For Select2 with Ajax call, I struggled with lot of options, but none worked. Then i came to following solution, which works like charm $("#select_id").html($("").val('val').text('text')).trigger("change");

Answer 4

If you, like me, have added a custom handler for the select2:selecting event the correct complete answer to changing a value and triggering the custom select2 event would be:

$('#select_id').val('val').trigger('change').trigger({
     type: 'select2:event_name', // It worked for me with select2:selecting and select2:select
     params: {
       args: { // Only use 'args' if using select2:selecting, select2:select does not use it
         data: varWithEventData
       }
     }
});

Answer 5

To programmatically select an option/item for a Select2 control, use the jQuery

$('#mySelect2').val('1'); // Select the option with a value of '1'
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed

You can also pass an array to val make multiple selections:

$('#mySelect2').val(['1', '2']);
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed