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

score 50 · Answer 1 · answered Aug 12 '16 at 19:31

50

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

is the right way, see here

answered Aug 12 '16 at 19:31

Dario

6,152
9
39
50

7

this work only if you change selected value before select2 implemented – Amro Mustafa May 28 '17 at 10:37
1

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: https://select2.org/programmatic-control/events#limiting-the-scope-of-the-change-event – Burak TARHANLI Oct 13 '21 at 11:39
@BurakTARHANLI, thank you for this, I was getting into a recursive loop and without this would have had to implement a custom check. – Shreedhar Kotekar Mar 24 '23 at 16:43

score 6 · Answer 2 · answered Jun 21 '17 at 07:24

6

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

answered Jun 21 '17 at 07:24

igasparetto

1,086
1
12
28

2

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 – vladimir.gorea Jul 28 '17 at 15:52
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. – igasparetto Jul 28 '17 at 21:33
1

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 – vladimir.gorea Jul 30 '17 at 13:21
1

`.val` is a jQuery method, not a select2. `.select2('val', myValue)` is a void select2 method, that is why you get those different results. – igasparetto Jul 31 '17 at 11:27

score 2 · Answer 3 · answered May 20 '22 at 15:58

2

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

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

answered May 20 '22 at 15:58

sourcecode

4,116
1
20
14

score 1 · Answer 4 · answered Jan 09 '19 at 07:34

1

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

answered Jan 09 '19 at 07:34

Sandeep

1,154
10
16

score 1 · Answer 5 · answered Aug 05 '21 at 08:27

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

score 0 · Answer 6 · answered May 08 '19 at 15:03

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

score 0 · Answer 7 · answered Oct 13 '21 at 11:32

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

how to change select2 value programmatically

7 Answers7

Linked