How to select the first element in the dropdown using jquery?

Question

I want to know how to select the first option in all select tags on my page using jquery.

tried this:

$('select option:nth(0)').attr("selected", "selected");

But didn't work

score 202 · Accepted Answer · edited Nov 01 '18 at 20:08

202

Try this out...

$('select option:first-child').attr("selected", "selected");

Another option would be this, but it will only work for one drop down list at a time as coded below:

var myDDL = $('myID');
myDDL[0].selectedIndex = 0;

Take a look at this post on how to set based on value, its interesting but won't help you for this specific issue:

Change the selected value of a drop-down list with jQuery

edited Nov 01 '18 at 20:08

Zander

84
14

answered Sep 08 '09 at 15:11

RSolberg

26,821
23
116
160

just change myID to select as i want all select tags – Amr Elgarhy Sep 08 '09 at 15:19
27

now in jQuery you can access the properties via the `.prop()` method. So you could use `$("select").prop("selectedIndex",0);` for a quick way to select the first option on all dropdowns. – Chris Barr Jan 13 '12 at 20:58
3

Do you know if this will trigger a 'change' event in all browsers just by setting the attribute? It seems to in Chrome, but haven't tested it extensively. I was thinking about adding another `$('select').trigger('change');` just in case. Thanks! – Brian Armstrong Apr 12 '12 at 20:40
3

`var myDDL = $('myID')` should have hash in the selector to become `var myDDL = $('#myID')` – user1069816 Jan 23 '14 at 11:37
1

This method works well for me: `$('select option').first().prop('selected',true);` – Lorenzo Magon Jan 19 '17 at 17:18
For my case, I like Chris Barr's method. Note, it will not fire the onchange event. The first code example in the answer will. Options are good. (no pun intended) – JRodd Feb 16 '18 at 15:17

Aistina · Answer 2 · 2013-10-25T15:04:35.257

13

Your selector is wrong, you were probably looking for

$('select option:nth-child(1)')

This will work also:

$('select option:first-child')

edited Oct 25 '13 at 15:04

answered Sep 08 '09 at 15:11

Aistina

12,435
13
69
89

3

CSS nth-child selector index starts at 1, not 0 – Sergey Oct 21 '13 at 21:54

score 11 · Answer 3 · edited May 23 '17 at 11:54

11

Ana alternative Solution for RSolgberg, which fires the 'onchange' event if present:

$("#target").val($("#target option:first").val());

How to make first option of <select > selected with jQuery?

edited May 23 '17 at 11:54

Community

1
1

answered Feb 06 '13 at 07:25

Muhammad Omar ElShourbagy

6,718
2
32
50

1

This works better than the accepted answer if you have to change the selected option multiple times. E.g. if you filter your options and display part of them. – Guillaume Renoult Feb 02 '16 at 04:16

score 5 · Answer 4 · edited Aug 23 '13 at 14:39

5

$("#DDLID").val( $("#DDLID option:first-child").val() );

For Complete Drop Down List Operations using Jquery

edited Aug 23 '13 at 14:39

Yuck

49,664
13
105
135

answered Jun 04 '12 at 17:17

vijay

51
1
1

The link is now dead. – Paul Gorbas Oct 20 '17 at 19:24

RichN · Answer 5 · 2009-09-08T15:22:29.817

4

What you want is probably:

$("select option:first-child")

What this code

attr("selected", "selected");

is doing is setting the "selected" attribute to "selected"

If you want the selected options, regardless of whether it is the first-child, the selector is:

$("select").children("[selected]")

edited Sep 08 '09 at 15:22

answered Sep 08 '09 at 15:15

RichN

6,181
3
30
38

1

Replace `attr` with `prop` if you're using jQuery 1.6+ – Jesan Fafon May 02 '14 at 16:11

Brandon · Answer 6 · 2017-08-25T13:43:04.667

I'm answering because the previous answers have stopped working with the latest version of jQuery. I don't know when it stopped working, but the documentation says that .prop() has been the preferred method to get/set properties since jQuery 1.6.

This is how I got it to work (with jQuery 3.2.1):

$('select option:nth-child(1)').prop("selected", true);

I am using knockoutjs and the change bindings weren't firing with the above code, so I added .change() to the end.

Here's what I needed for my solution:

$('select option:nth-child(1)').prop("selected", true).change();

See .prop() notes in the documentation here: http://api.jquery.com/prop/

score 3 · Answer 7 · answered Apr 02 '19 at 05:11

3

Here is a simple javascript solution which works in most cases:

document.getElementById("selectId").selectedIndex = "0";

answered Apr 02 '19 at 05:11

Jagruti

312
4
18

ShivarajRH · Answer 8 · 2013-09-06T07:25:19.560

1

    var arr_select_val=[];

    $("select").each(function() { 
        var name=this.name;
            arr_select_val[name]=$('select option:first-child').val();
    });


// Process the array object
     $('.orders_status_summary_div').print(arr_select_val);

edited Sep 06 '13 at 07:25

answered Sep 06 '13 at 07:13

ShivarajRH

902
12
24

score 1 · Answer 9 · answered May 30 '11 at 05:02

1

if you want to check the text of selected option regardless if its the 1st child.

var a = $("#select_id option:selected").text();
alert(a); //check if the value is correct.
if(a == "value") {-- execute code --}

answered May 30 '11 at 05:02

sarah

103
2
12

Saved me a second search. This is pretty much what I was looking for, although I was more interested in changing the value than checking it. `$('#myID option:selected').text('NEW STRING');` – Ricky Payne Apr 24 '13 at 11:49

How to select the first element in the dropdown using jquery?

9 Answers9