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

Carbajal

Answer 1

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

is the right way, see here

Notogaea

this work only if you change selected value before select2 implemented – Sausauce

Just a reminder: While using .trigger('change'), you can limit the scope of the change event by adding .select2 namespace to the event name. E.g. .trigger('change.select2'). You can use this for preventing the change event triggering multiple times. For more info see the select2 docs: select2.org/programmatic-control/… – Campus

@BurakTARHANLI, thank you for this, I was getting into a recursive loop and without this would have had to implement a custom check. – Gastrology

Answer 2

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

Roseannroseanna

Didn't work, received "select2('val') method was called on an element that is not using Select2". We need a better documentation of this simple change task – Nonferrous

Well, that "error" message is pretty clear: you have not initialised select2 yet but are trying to set a value. In previous versions of the plugin you could do both things together but now you can't. – Roseannroseanna

If i first initialize it return "undefined" and the select value is set to empty. However, with .val('xx').trigger('change') it works. I tried it from the console on select2 example website: $('.js-example-basic-single.js-states').select2('val', 'CA') returned undefined and $('.js-example-basic-single.js-states').val('CA').trigger('change') worked – Nonferrous

.val is a jQuery method, not a select2. .select2('val', myValue) is a void select2 method, that is why you get those different results. – Roseannroseanna

Answer 3

I have used the following code in 4.x.xx version and it is working

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

Hardunn

Answer 4

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

Brentwood

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

Arnelle

Answer 6

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

Yukyukaghir

Answer 7

For those who facing an issue like this:

If you're using multiple select elements and have a common event handler (like $(".mySelect2Inputs").click(...) ) when you do $('#mySelect2').trigger('change') the click event handler is gonna trigger multiple times ($(".mySelect2Inputs").length times).

To prevent this situation, you must use $('#mySelect2').trigger('change.select2') (attention to .select2 namespace!).

From the select2 docs: https://select2.org/programmatic-control/events#limiting-the-scope-of-the-change-event

It's common for other components to be listening to the change event, or for custom event handlers to be attached that may have side effects. To limit the scope to only notify Select2 of the change, use the .select2 event namespace:

$('#mySelect2').val('US'); // Change the value or make some change to the internal state $('#mySelect2').trigger('change.select2'); // Notify only Select2 of changes

Campus