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>

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

You can try this

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

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.

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

$("#target")[0].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).

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

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;

});

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

This worked for me!

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

Simple like that:

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

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

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

works for me.

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

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

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.

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

Use:

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

Please find the working simple in this JSFiddle.

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

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

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

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

worked fine in chrome

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

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

...

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

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

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

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

console.log(firstItem)

Use:

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