[jquery] How to make the first option of <select> selected with jQuery

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

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

This question is related to jquery select

The answer is


Simple like that:

$('#target option:first').prop('selected', true);

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

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

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

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.


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

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

$('#newType option:first').prop('selected', true);

Here is how I would do it:

$("#target option")
    .removeAttr('selected')
    .find(':first')     // You can also use .find('[value=MyVal]')
        .attr('selected','selected');

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

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

...

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

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

$("#target")[0].selectedIndex = 0;

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


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

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

This worked for me!

$("#target").prop("selectedIndex", 0);

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

Use:

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

Please find the working simple in this JSFiddle.


Use:

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

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.


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

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

works for me.


$("#target").val(null);

worked fine in chrome


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;

});

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


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

Check this best approach using jQuery with ECMAScript 6:

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

You can try this

$("#target").prop("selectedIndex", 0);

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