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

Question

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

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

Answer 1

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

Answer 2

You can try this

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

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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;

});

Answer 10

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

Answer 11

This worked for me!

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

Answer 12

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

Answer 13

Simple like that:

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

Answer 14

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

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

works for me.

Answer 15

Here is how I would do it:

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

Answer 16

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

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

Answer 17

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.

Answer 18

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

Answer 19

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

Answer 20

Use:

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

Please find the working simple in this JSFiddle.

Answer 21

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

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

Answer 22

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

worked fine in chrome

Answer 23

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

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

...

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

Answer 24

Check this best approach using jQuery with ECMAScript 6:

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

Answer 25

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

Answer 26

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

Answer 27

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

console.log(firstItem)

Answer 28

Use:

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