640

How do I make the first option of selected with jQuery?

<select id="target">
  <option value="1">...</option>
  <option value="2">...</option>
</select>
0

29 Answers 29

1092
$("#target").val($("#target option:first").val());
13
  • 416
    Should be noted that this more easily done with $("#target")[0].selectedIndex = 0; Commented Sep 12, 2009 at 4:34
  • 20
    It works, but it's based on 1st element value, if 1st element contains empty value, it will select nearest element WITH value
    – evilReiko
    Commented Mar 1, 2011 at 12:37
  • 2
    Seems to work great, except for IE6. Unsure of 7-8, works on 9.
    – Nicholi
    Commented Feb 3, 2012 at 21:53
  • 3
    I recant my previous statement, was getting ahead of myself. $("#target").val("option:first"); works most everywhere but IE6 $("target").val($("#target option:first").val()); will work in IE6, because you are literally looking up the first value, and entering it as target's value. Two id lookups instead of one.
    – Nicholi
    Commented Feb 4, 2012 at 1:56
  • 3
    This answer is incorrect. The suggestion of $("#target")[0].selectedIndex = 0; should be used. As others have noted, it will always be the first element in all cases. Using the value is unreliable - for example if several elements share the same value as the first.
    – Drew Alden
    Commented Mar 7, 2016 at 23:58
222

You can try this

$("#target").prop("selectedIndex", 0);
5
  • 2
    This does not work properly in all cases. I have a parent/child cascading drop downs. Select parent #1, display child #1, select parent #2 display child #2. Any time they select a new parent it should set the corresponding child back to the first option. This solution does not do this. It leaves the child menu "sticky". See the option:selected.prop('selected',false) / option:first.prop('selected','selected') solution on this question for the answer that works in more scenarios. Commented Aug 24, 2013 at 14:08
  • this doesnt trigger onChange event. At least in chrome. Commented Dec 29, 2016 at 9:32
  • Thank you! This is the first answer in the list of answers that worked for me. Commented Jan 6, 2017 at 19:52
  • 9
    @Tomasz $("#target").prop("selectedIndex", 0).change();
    – mplungjan
    Commented Feb 26, 2018 at 12:45
  • @Romesh how can I set selectedIndex base on value? Commented Sep 11, 2018 at 7:57
116
// remove "selected" from any options that might already be selected
$('#target option[selected="selected"]').each(
    function() {
        $(this).removeAttr('selected');
    }
);


// mark the first option as selected
$("#target option:first").attr('selected','selected');
4
  • 1
    Good second approach. Please add the value of the selected attribute. For example, attr("selected", "selected"). Without this extra parameter, the selection isn't made. Commented Sep 12, 2009 at 4:36
  • @EgorPavlikhin - I just edited the answer to include JQuery code to remove the "selected" flag from any options that might have already been selected. Now the answer is correct :) Commented Dec 8, 2011 at 21:29
  • 23
    There is no need for the each function, should be: $('#target option[selected="selected"]').removeAttr('selected') also now should be used with removeProp and prop instead.
    – vsync
    Commented Dec 22, 2011 at 9:59
  • A more thorough version of James Lee Baker's answer elsewhere on this question, though adds compute cycles which may not be necessary if the interface is well managed. Commented Aug 24, 2013 at 14:13
76

When you use

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

this will not work in Chrome and Safari if the first option value is null.

I prefer

$("#target option:first").attr('selected','selected');

because it can work in all browsers.

1
  • 3
    You also need to "unselect" any prior selected elements for this to work in more cases. See the answer from James Lee Baker for details. Commented Aug 24, 2013 at 14:15
58

Changing the value of the select input or adjusting the selected attribute can overwrite the default selectedOptions property of the DOM element, resulting in an element that may not reset properly in a form that has had the reset event called.

Use jQuery's prop method to clear and set the option needed:

$("#target option:selected").prop("selected", false);
$("#target option:first").prop("selected", "selected");
1
  • 3
    Perfect. I have cascading drop down menus. When a user selects parent option 2 then child option 3 I do not want that to "stick". In other words the user then selects parent #1, then re-selects parent #2. When that happens I want the child menu to reset to the first option (which is "Any" in my case). All the other solutions here fail on Firefox v19 and Chrome on Linux. Commented Aug 24, 2013 at 14:07
37
$("#target")[0].selectedIndex = 0;
1
  • 1
    This will not work in cases where a drop down has a pre-selected item. See my comments on the selected answer for details. Commented Aug 24, 2013 at 14:15
23

This worked for me!

$("#target").prop("selectedIndex", 0);
1
  • How is this different from @Esben's answer from 6 years earlier?
    – Jerther
    Commented Sep 19, 2023 at 23:43
21

One subtle point I think I've discovered about the top voted answers is that even though they correctly change the selected value, they do not update the element that the user sees (only when they click the widget will they see a check next to the updated element).

Chaining a .change() call to the end will also update the UI widget as well.

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

(Note that I noticed this while using jQuery Mobile and a box on Chrome desktop, so this may not be the case everywhere).

1
  • Chaining a .change() call to the end will also update the UI widget as well.
    – codemirror
    Commented Jun 8, 2017 at 10:17
18

If you have disabled options, you may add not([disabled]) to prevent selecting them which results into the following:

$("#target option:not([disabled]):first").attr('selected','selected')
1
  • 1
    Good point about disabled options. Nice addition to the answers presented! Commented Aug 24, 2013 at 14:14
17

Another way to reset the values (for multiple selected elements) could be this:

$("selector").each(function(){

    /*Perform any check and validation if needed for each item */

    /*Use "this" to handle the element in javascript or "$(this)" to handle the element with jquery */

    this.selectedIndex=0;

});
1
  • 5
    +1 it's actually a good answer, but you could have made it more specific to the question domain; instead of $("selector") you could have just written $('#target')
    – Ja͢ck
    Commented May 17, 2012 at 4:12
14
$('#newType option:first').prop('selected', true);
1
  • This works only if there's no already selected options. See James Lee Baker's answer.
    – Arsen K.
    Commented Jun 13, 2014 at 17:13
7

I've found that just setting attr selected doesn't work if there's already a selected attribute. The code I use now will first unset the selected attribute, then select the first option.

$('#target').removeAttr('selected').find('option:first').attr('selected', 'selected');
1
  • This works well and is very similar to the answer by James Lee Baker noted elsewhere on this question. I like the other answer with option:selected and option:first as the execution of option:first is likely to be faster (compute-wise) than find(). Commented Aug 24, 2013 at 14:13
7

Simple like that:

$('#target option:first').prop('selected', true);
1
  • 1
    this is much better Commented Jul 25, 2016 at 12:00
6

Although the each function probably isn't necessary ...

$('select').each(function(){
    $(this).find('option:first').prop('selected', 'selected');
});

works for me.

6

Here is how I would do it:

$("#target option")
    .removeAttr('selected')
    .find(':first')     // You can also use .find('[value=MyVal]')
        .attr('selected','selected');
1
  • 1
    This works well and is very similar to the answer by James Lee Baker noted elsewhere on this question. I like the other answer with option:selected and option:first as the execution of option:first is likely to be faster (compute-wise) than find(). Commented Aug 24, 2013 at 14:11
3

It only worked for me using a trigger('change') at the end, like this:

$("#target option:first").attr('selected','selected').trigger('change');
2

For me it only worked when I added the following code:

.change();

For me it only worked when I added the following code: As I wanted to "reset" the form, that is, select all the first options of all the selects of the form, I used the following code:

$('form').find('select').each(function(){ $(this).val($("select option:first").val()); $(this).change(); });

2

If you are going to use the first option as a default like

<select>
    <option value="">Please select an option below</option>
    ...

then you can just use:

$('select').val('');

It is nice and simple.

0
1

On the back of James Lee Baker's reply, I prefer this solution as it removes the reliance on browser support for :first :selected ...

$('#target').children().prop('selected', false);
$($('#target').children()[0]).prop('selected', 'selected');
1

Use:

$("#selectbox option:first").val()

Please find the working simple in this JSFiddle.

2
  • How about position 15, 25, or with specific text? :D Commented Apr 9, 2018 at 18:20
  • Calling .val() just gets the value of the first option in the list. It doesn't actually select (make selected) the first option, as was asked in the original question.
    – Funka
    Commented Nov 9, 2019 at 21:14
1

For me, it only worked when I added the following line of code

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

$('select#id').val($('#id option')[index].value)

Replace the id with particular select tag id and index with particular element you want to select.

i.e.

<select class="input-field" multiple="multiple" id="ddlState" name="ddlState">
                                        <option value="AB">AB</option>
                                        <option value="AK">AK</option>
                                        <option value="AL">AL</option>
</select>

So here for first element selection I will use following code :

$('select#ddlState').val($('#ddlState option')[0].value)
1

None of the answers worked on here because they do not invoke the 'trigger' method.

$("#selector").prop("selectedIndex", 1).val(); 
$('#selector').trigger('change'); // <--- answers miss this step
0
$("#target").val(null);

worked fine in chrome

0

If you're storing the jQuery object of the select element:

var jQuerySelectObject = $("...");

...

jQuerySelectObject.val(jQuerySelectObject.children().eq(0).val());
0

Check this best approach using jQuery with ECMAScript 6:

$('select').each((i, item) => {
  var $item = $(item);
  $item.val($item.find('option:first').val()); 
});
0

You can select any option from dropdown by using it.

// 'N' can by any number of option.  // e.g.,  N=1 for first option
$("#DropDownId").val($("#DropDownId option:eq(N-1)").val()); 
0

var firstItem = $("#interest-type").prop("selectedIndex", 0).val();

console.log(firstItem)

-1

Use:

alert($( "#target option:first" ).text());
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.