Set the first option select2

Question

I want to set the first position to select2 dropdown by default, I have tried this but It doens´t work:

$('#mylist').val($('#mylist option:first-child').val()).trigger('change');

Other way that I tried;

$('#mylist').val(1);

But the problem is I don´t know what value is, because it is depend from a query and It will not always be the same value.

I did not set the dropdown values ​​from the HTML, but it is an input hidden and the values ​​are loaded in a query

I hope that anyone can help me

Regards!

Krahmer

Can you provide some HTML? – Inkblot

do you want the first element to be selected by default? – Germanophobe

$('#mylist option:eq(0)').prop('selected',true) – Gel

Yes It is @Germanophobe – Krahmer

Possible duplicate of JQuery select2 set default value from an option in list? – Ludhiana

Answer 1

If you using Select2 4.x just trigger change.select2

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

Electrometallurgy

I use select2 3.5x – Krahmer

Answer 2

please try with this:

$('#yourSelect2').val($('#yourSelect2 option:eq(1)').val()).trigger('change');

the value from eq() depends of the position that you want to select

Ameba

Answer 3

This works for me:

$('#mylist option:eq(0)').prop('selected',true);

Obellia

@stephen-rauch .trigger('change') should be added else not working – Apple

@AliKaraca, I did not write the answer, I am only the editor. – Maltz

Answer 4

Please do this

$('select#mylist').val(1).select2();

Gon

This answer works great if u don't need to refresh something like datatable. Nice solution. – Aaron

Answer 5

It's better to use attribute specifiers and set that element's selected prop to true like so:

$('option[value="op2"]').prop('selected', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="list">
  <option value="op1">Option 1</option>
  <option value="op2">Option 2</option>
  <option value="op3">Option 3</option>
  <option value="op4">Option 4</option>
</select>

Then change op2 to whatever the value attribute of the desired default option is.

Somewhat

Thanks for your answer, the problem is that the dropdown is filled with a query – Krahmer

Answer 6

this work for me :

$("#mylist").val($("#mylist option:first").val()).trigger('change');

juste remove -child

Doctrine

Answer 7

As you may know Select2 need data in particular format only [id="id_value",text="data_linked_to_id"]

Lets consider you want to select first item ,you should have its Id which is used by select2 to list all items.(let here first id be 1)

$('#selectElementId').val("1"); $('#selectElementId').trigger('change');

If want to set multiple items selected then pass array of ids.

ids=["1","3","4"]

$("#selectElementId").val(ids);

$("#selectElementId").trigger('change');

           **OR**

$("#selectElementId").val(["1","3","4"]);

$("#selectElementId").trigger('change');

Peters

Answer 8

Step 1: Select first option of your select(s) - works not only for select2

$('#myForm').find('select').find('option:eq(0)').attr('selected','selected');

Step 2: Trigger select2 change

$('#myForm select').trigger('change.select2');

Quinn