Home » Jquery » How to make first option of <select > selected with jQuery?

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

Posted by: admin November 2, 2017 Leave a comment

Questions:
<select id="target">
  <option value="1">...</option>
  <option value="2">...</option>
</select>
Answers:
$("#target").val($("#target option:first").val());

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

Questions:
Answers:

You can try this

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

Questions:
Answers:

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.

Questions:
Answers:

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

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

Questions:
Answers:

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

Questions:
Answers:

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

$("#target option:not([disabled]):first").attr('selected','selected')

Questions:
Answers:

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;

});

Questions:
Answers:

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

Questions:
Answers:

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

Questions:
Answers:

Simple like that:

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

Questions:
Answers:

I know this question has been answered, but here is how I would do it

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

Questions:
Answers:

Although the each function probably isn’t necessary …

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

works for me.

Questions:
Answers:

If you 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('');

Nice and simple.

Questions:
Answers:

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

Please find the working simple jsfiddle

Questions:
Answers:

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

Questions:
Answers:

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

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

Questions:
Answers:

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

Questions:
Answers:
$("#target").val(null);

worked fine in chrome

Questions:
Answers:

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

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

...

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

Questions:
Answers:

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

Questions:
Answers:

Check this best approach using jQuery with ES2015:

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

Regards, Nicholls