How to set the first option on a select box using jQuery

Question

I have two HTML select boxes  I need to reset one select box when I make a selection in another    lt select id  name   gt       lt option value    gt select all lt  option gt       lt option value  1  gt Text 1 lt  option gt       lt option value  2  gt Text 2 lt  option gt       lt option value  3  gt Text 3 lt  option gt   lt  select gt    lt select id  name2   gt       lt option value    gt select all lt  option gt       lt option value  1  gt Text 1 lt  option gt       lt option value  2  gt Text 2 lt  option gt       lt option value  3  gt Text 3 lt  option gt   lt  select gt    When I select an option of the first select  i e  id  name    I need to reset the second select to select all  similarly  when I select an option of the second select  i e  id  name2    I need to reset the first select to select all   How can I do that

User · Answer

I created a new option in the select tag that has a value of empty string      and used      form query   find  select topic   val

User · Answer

This can also be used      name2   change function            name   val       You can set the first value of first one if that is not empty           name   change function            name2   val

User · Answer

As pointed out by  PierredeLESPINAY in the comments  my original solution was incorrect - it would reset the dropdown to the topmost option  but only because the undefined return value resolved to index 0   Here s a correct solution  which takes the selected property into account       name   change function            name2   val function              return   this  find  option   filter function                  return   this  prop  defaultSelected               val                  DEMO  http   jsfiddle net weg82 257     Original answer - INCORRECT  In jQuery 1 6  you need to use the  prop method to get the default selection      Resets the name2 dropdown to its default value     name2   val      name2   prop  defaultSelected        To make it reset dynamically when the first dropdown changes  use the  change event       name   change function          name2   val      name2   prop  defaultSelected

User · Answer

I had a problem using the defaultSelected property in the answer by  Jens Roland in jQuery v1 9 1  A more generic way  with many dependent selects  would be to put a data-default attribute in your dependent selects and then iterate through them when reseting     lt select id  name0   gt       lt option value    gt reset lt  option gt       lt option value  1  gt Text 1 lt  option gt       lt option value  2  gt Text 2 lt  option gt       lt option value  3  gt Text 3 lt  option gt   lt  select gt    lt select id  name1  class  name  data-default  1  gt       lt option value    gt select all lt  option gt       lt option value  1  selected  true  gt Text 1 lt  option gt       lt option value  2  gt Text 2 lt  option gt       lt option value  3  gt Text 3 lt  option gt   lt  select gt    lt select id  name2  class  name  data-default  2  gt       lt option value    gt select all lt  option gt       lt option value  1  gt Text 1 lt  option gt       lt option value  2  selected  true  gt Text 2 lt  option gt       lt option value  3  gt Text 3 lt  option gt   lt  select gt    And the javascript         name0   change function        if     name0   val                       select name   each function index               this  val   this  data  default                       else            select name   val     name0   val                  See http   jsfiddle net 8hvqN  for a working version of the above

User · Answer

Setting option 1 in the select element can be done by this segment  To visually show it  you have tp add  trigger  change   at the end       name   removeAttr  selected   find  option first   attr  selected    selected   trigger  change

User · Answer

You can try this       select    each  function          if      this   children   length  gt  0                   this   children   0    attr   selected    selected                this   change

User · Answer

Use the code below  See it working here http   jsfiddle net usmanhalalit 3HPz4      function             name   change function                 name2 option value       attr  selected   selected                       name2   change function                 name option value       attr  selected   selected

User · Answer

Use this if you want to reset the select to the option which has the  selected  attribute  Works similar to the form reset   inbuilt javascript function to the select        name   val     name option selected    val

User · Answer

Here is how I got it to work if you just want to get it back to your first option e g   Choose an option   Select id wrap  is obviously the div around the select  but I just want to make that clear just in case it has any bearing on how this works   Mine resets to a click function but I m sure it will work inside of an on change as well         select id wrap   find  select option   prop  selected   false

User · Answer

This helps me a lot     yourSelector  find  select option eq 0    prop  selected   true

User · Answer

Here is the best solution im using  This will apply for over 1 slectbox   x000D   x000D     select   change function    x000D      var thisval     this  val    x000D         select   prop  selectedIndex  0   x000D        this  val thisval   x000D     x000D   x000D   x000D

User · Answer

Use jquery for binding onchange event to select but you don t need to create another   this  jquery object      select name name2    change function        if  this value            console log  option value      this value           console log  option text       this options this selectedIndex  text               Reset selected         this selectedIndex   this defaultSelected

User · Answer

If you just want to reset the select element to it s first position  the simplest way may be       name2   val        To reset all select elements in the document      select   val       EDIT  To clarify as per a comment below  this resets the select element to its first blank entry and only if a blank entry exists in the list

User · Answer

This is the most flexible reusable way to reset all select boxes in your form         var  form      form      Replace with your form selector          select    form  each function               this  val   this  prop  defaultSelected

User · Answer

Use this code to reset all selection fields to the default option  where the attribute selected is defined    lt select id  name1   gt       lt option value  1  gt Text 1 lt  option gt       lt option value  2  selected  selected   gt Default Text 2 lt  option gt       lt option value  3  gt Text 3 lt  option gt   lt  select gt   lt select id  name2   gt       lt option value  1  gt Text 1 lt  option gt       lt option value  2  gt Text 2 lt  option gt       lt option value  3  selected  selected   gt Default Text 3 lt  option gt   lt  select gt   lt script gt         select   each  function               this  val    this  find  option selected    val               lt  script gt

User · Answer

Here s how to handle it with a random option element defined as the default value  in this case Text 2 is the default     lt select id  name2   gt      lt option value    gt select all lt  option gt      lt option value  1  gt Text 1 lt  option gt      lt option value  2  selected  selected  gt Text 2 lt  option gt      lt option value  3  gt Text 3 lt  option gt   lt  select gt   lt script gt          name2 option selected    prop  selected   true    lt  script gt

User · Answer

Something like this should do the trick  https   jsfiddle net TmJCE 898       name2   change function            name   prop  selectedIndex  0             name   change function            name2   prop  selectedIndex  0

[javascript] How to set the first option on a select box using jQuery?

Examples related to javascript

Examples related to jquery