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!

Possible duplicate of [JQuery select2 set default value from an option in list?](http://stackoverflow.com/questions/16969666/jquery-select2-set-default-value-from-an-option-in-list) — Heretic Monkey, Mar 09 '17 at 19:11

score 20 · Accepted Answer · answered Mar 09 '17 at 19:02

20

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

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

answered Mar 09 '17 at 19:02

Seva Kalashnikov

3,735
2
13
29

1

I use select2 3.5x – Fabian Sierra Mar 09 '17 at 19:05

score 5 · Answer 2 · edited Oct 09 '18 at 03:41

5

This works for me:

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

edited Oct 09 '18 at 03:41

Stephen Rauch

40,722
30
82
105

answered Oct 09 '18 at 03:21

Muhsinatul F Abas

51
1
3

1

@stephen-rauch .trigger('change') should be added else not working – Ali Karaca May 18 '20 at 08:17
@AliKaraca, I did not write the answer, I am only the editor. – Stephen Rauch May 18 '20 at 12:47

score 3 · Answer 3 · answered Oct 11 '18 at 17:31

3

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

answered Oct 11 '18 at 17:31

Alberto FC

31
1

score 1 · Answer 4 · answered Mar 09 '17 at 19:05

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.

Thanks for your answer, the problem is that the dropdown is filled with a query — Fabian Sierra, Mar 09 '17 at 19:08

score 1 · Answer 5 · answered Mar 21 '18 at 11:12

1

Please do this

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

answered Mar 21 '18 at 11:12

Jaskaran singh Rajal

2,071
2
14
27

score 0 · Answer 6 · answered May 17 '21 at 12:54

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

Set the first option select2

6 Answers6