使用选定的选项加载 Select2 而不触发更改？

Question

Is there any way to load select2 to a default value without triggering the change event?

Currently, I am doing:

$('#mylist').val(2).trigger("change");

But this creates a delay where the user will at first see one option and then it will change, which is quite an annoyance.

Answer 1

I know I'm really late to answer this question. I was facing the same issue. But doing a bit of research I found a solution that works like a charm.

You can set an option using below code

$("#mylist").val(2).trigger('change.select2');

This solution will not trigger the main change event but sets the option to the select2 component.

Hope that helps you.

Answer 2

If you want to set a selected option, normaly you can do:

 $('#element').val('your_val').trigger('change');

But if you dont want to run the trigger, you must to destroy it first and then assign val before create again, like this:

$('#element').select2('destroy');
$('#element').val('your_val').select2();

Answer 3

Set a default value in your HTML:

<select id="myList">
   <option id="foo">option 1</option>
   <option id="bar" selected="selected">option 2</option>
</select>

Then call select2 on your element to initialize it:

$('#myList').select2();

or

$('#myList').select2("val", null);