How to make the first option of select selected with jQuery

Question

How do I make the first option of  selected with jQuery    lt select id  target  gt     lt option value  1  gt     lt  option gt     lt option value  2  gt     lt  option gt   lt  select gt

User · Answer

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

User · Answer

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

User · Answer

If you are going to use the first option as a default like   lt select gt       lt option value    gt Please select an option below lt  option gt            then you can just use      select   val        It is nice and simple

User · Answer

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

User · Answer

For me  it only worked when I added the following line of code      target   val     target   find  option first   val

User · Answer

newType option first   prop  selected   true

User · Answer

target   0  selectedIndex   0

User · Answer

Use   alert      target option first    text

User · Answer

target   val     target option first   val

User · Answer

If you re storing the jQuery object of the select element   var jQuerySelectObject                   jQuerySelectObject val jQuerySelectObject children   eq 0  val

User · Answer

target   val null     worked fine in chrome

User · Answer

It only worked for me using a trigger  change   at the end  like this       target option first   attr  selected   selected   trigger  change

User · Answer

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

User · Answer

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     lt select class  input-field  multiple  multiple  id  ddlState  name  ddlState  gt                                           lt option value  AB  gt AB lt  option gt                                           lt option value  AK  gt AK lt  option gt                                           lt option value  AL  gt AL lt  option gt   lt  select gt    So here for first element selection I will use following code        select ddlState   val     ddlState option   0  value

User · Answer

Although the each function probably isn t necessary         select   each function          this  find  option first   prop  selected    selected          works for me

User · Answer

Simple like that        target option first   prop  selected   true

User · Answer

You can try this      target   prop  selectedIndex   0

User · Answer

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

User · Answer

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

User · Answer

Use       selectbox option first   val     Please find the working simple in this JSFiddle

User · Answer

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

User · Answer

Here is how I would do it       target option        removeAttr  selected        find   first          You can also use  find   value MyVal             attr  selected   selected

User · Answer

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

User · Answer

Check this best approach using jQuery with ECMAScript nbsp 6      select   each  i  item    gt      var  item     item      item val  item find  option first   val

User · Answer

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

User · Answer

This worked for me       target   prop  selectedIndex   0

User · Answer

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

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

Examples related to jquery

Examples related to select