529

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

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

27 Answers 27

913
$("#target").val($("#target option:first").val());
  • 348
    Should be noted that this more easily done with $("#target")[0].selectedIndex = 0; – David Andres Sep 12 '09 at 4:34
  • 15
    It works, but it's based on 1st element value, if 1st element contains empty value, it will select nearest element WITH value – evilReiko Mar 1 '11 at 12:37
  • 2
    Seems to work great, except for IE6. Unsure of 7-8, works on 9. – Nicholi Feb 3 '12 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 Feb 4 '12 at 1:56
  • 2
    And it's actually necessary for IE6, 7, and 8. Whereas .val('option:first') works in IE9 (and Safari and Firefox and Chrome and Opera). – Nicholi Feb 4 '12 at 2:20
164

You can try this

$("#target").prop("selectedIndex", 0);
  • 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. – Lance Cleveland Aug 24 '13 at 14:08
  • 1
    This also works when you are using $(this) – DalekSall May 24 '16 at 13:20
  • this doesnt trigger onChange event. At least in chrome. – Tomasz Mularczyk Dec 29 '16 at 9:32
  • Thank you! This is the first answer in the list of answers that worked for me. – Casey Crookston Jan 6 '17 at 19:52
  • 3
    @Tomasz $("#target").prop("selectedIndex", 0).change(); – mplungjan Feb 26 '18 at 12:45
108
// 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');
  • 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. – David Andres Sep 12 '09 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 :) – jmort253 Dec 8 '11 at 21:29
  • 19
    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 Dec 22 '11 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. – Lance Cleveland Aug 24 '13 at 14:13
65

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.

  • 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. – Lance Cleveland Aug 24 '13 at 14:15
  • 1
    does not work correctly with Firefox 53.0 – Oleg Sh Apr 25 '17 at 19:48
43

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");
  • 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. – Lance Cleveland Aug 24 '13 at 14:07
32
$("#target")[0].selectedIndex = 0;
  • 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. – Lance Cleveland Aug 24 '13 at 14:15
19

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).

  • Chaining a .change() call to the end will also update the UI widget as well. – codemirror Jun 8 '17 at 10:17
15

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
    Good point about disabled options. Nice addition to the answers presented! – Lance Cleveland Aug 24 '13 at 14:14
15

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;

});
  • 4
    +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 May 17 '12 at 4:12
  • 1
    This is what I needed as I have multiple selects, thanks :) – Fiona - myaccessible.website Oct 23 '13 at 14:30
7

Simple like that:

$('#target option:first').prop('selected', true);
7
$('#newType option:first').prop('selected', true);
  • This works only if there's no already selected options. See James Lee Baker's answer. – Webars Jun 13 '14 at 17:13
6

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');
  • 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(). – Lance Cleveland Aug 24 '13 at 14:13
5

Here is how I would do it:

$("#target option")
    .removeAttr('selected')
    .find(':first')     // You can also use .find('[value=MyVal]')
        .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(). – Lance Cleveland Aug 24 '13 at 14:11
4

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

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

works for me.

2

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

$("#target option:first").attr('selected','selected').trigger('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.

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

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(); });

1

Use:

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

Please find the working simple in this JSFiddle.

  • How about position 15, 25, or with specific text? :D – Marcelo Agimóvel Apr 9 '18 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 Nov 9 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

This worked for me!

$("#target").prop("selectedIndex", 0);
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

$('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

Use:

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

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