Reset select value to default

Question

I have select box   lt select id  my select  gt       lt option value  a  gt a lt  option gt       lt option value  b  selected  selected  gt b lt  option gt       lt option value  c  gt c lt  option gt   lt  select gt    lt div id  reset  gt      reset  lt  div gt    I have also reset button  here default  selected  value is  b   suppose I select  c  and after I need resert select box value to default  how to make this using jquery       reset   on  click   function             What do here        jsfiddle  http   jsfiddle net T8sCf 1

User · Answer

A simple way that runs is   var myselect      select SimpleAddAClass     myselect 0  selectedIndex   0   myselect selectmenu  refresh

User · Answer

Reset all selection fields to the default option  where the attribute selected is defined       reset   on  click   function             Reset all selections fields to default option         select   each  function               this  val    this  find  option selected    val

User · Answer

You can also reset the values of multiple SELECTs and then trigger the submit button   Please see it here in action   Live Example     function            filter   click function              alert  clicked                 name   prop  selectedIndex  0               name2   prop  selectedIndex  0               submitBtn   click

User · Answer

You can use the data attribute of the select element   lt select id  my select  data-default-value  b  gt       lt option value  a  gt a lt  option gt       lt option value  b  selected  selected  gt b lt  option gt       lt option value  c  gt c lt  option gt   lt  select gt    Your JavaScript       reset   on  click   function              my select   val     my select   data  default-value           http   jsfiddle net T8sCf 10   UPDATE    If you don t know the default selection and if you cannot update the html  add following code in the dom ready        my select   data  default-value      my select   val       http   jsfiddle net T8sCf 24

User · Answer

If you looking to reset  try this simply      element option   removeAttr  selected      To set desire value  try like this     element  val  1

User · Answer

You can do this way   var preval       my select   val       get the def value      reset   on  click   function             my select option value       preval         prop  selected   true         checkout this fiddle  take a var which holds the default loaded value before change event then get the option with the attribute selector of value with holds the var value set the property to selected

User · Answer

I was trying to resolve it like the other answers unfortunately  I didn t get a right way to do it  once I tried as I write below        lt   ddID ClientID   gt    get 0  selectedIndex   0    this code works for me  I hope that will be useful for you guys   Best Regards   Samuel Alvarado

User · Answer

lt select id  my select  gt       lt option value  a  gt a lt  option gt       lt option value  b  selected  selected  gt b lt  option gt       lt option value  c  gt c lt  option gt   lt  select gt    lt div id  reset  gt      reset  lt  div gt       reset   on  click   function              my select   prop  selectedIndex  0         This is a simple way for your question  only one line answer

User · Answer

reset   on  click   function              my select   prop  selectedIndex  0

User · Answer

With jquery        reset   on  click   function             my select   val     my select   find  option selected  selected     val

User · Answer

my select   find  option not  first    remove      Call this function each time before populating the select

User · Answer

reset   on  click   function              my select   val  -1          http   jsfiddle net T8sCf 1323

User · Answer

You can make use of the defaultSelected property of an option element      Contains the initial value of the selected HTML attribute  indicating whether the option is selected by default or not    So  the DOM interface already keeps track which option was selected initially       reset   on  click   function              my select option   prop  selected   function             return this defaultSelected                DEMO  This would even work for multi-select elements   If you don t want to iterate over all options  but  break  after you found the originally selected one  you can use  each instead       my select option   each function          if  this defaultSelected            this selected   true          return false                Without jQuery   var options   document querySelectorAll   my select option    for  var i   0  l   options length  i  lt  l  i          options i  selected   options i  defaultSelected

User · Answer

my select   get 0  selectedIndex   1      But  In my opinion  the better way is using HTML only  with  lt input type  reset    gt      lt form gt       lt select id  my select  gt           lt option value  a  gt a lt  option gt           lt option value  b  selected  selected  gt b lt  option gt           lt option value  c  gt c lt  option gt       lt  select gt       lt input type  reset  value  reset    gt   lt  form gt     Check the jsFiddle Demo

User · Answer

This works for me       reset   on  click   function              my select option selected    prop  selected   true       You find for the default option that has the select attribute and you change the selection to that option

User · Answer

reset   on  click   function              my select   val  b     Setting the value as  b

User · Answer

For those who are working with Bootstrap-select  you might want to use this       mySelect   selectpicker  render

User · Answer

I have select box   lt select id  my select  gt       lt option value  a  gt a lt  option gt       lt option value  b  selected  selected  gt b lt  option gt       lt option value  c  gt c lt  option gt   lt  select gt    lt div id  reset  gt      reset  lt  div gt    I have also reset button  here default  selected  value is  b   suppose I select  c  and after I need resert select box value to default  how to make this using Angular2

User · Answer

One nice clean way is to add a data-default attribute to the select   lt select id  my select  data-default  b  gt       lt  select gt    An then the code is really simple       reset   on  click   function          var  select       my select         select val  select data  default           Live example  http   jsfiddle net T8sCf 7

User · Answer

Why not use a simple javascript function and call it on onclick event   function reset    document getElementById  my select   selectedIndex   1    1   option 2

User · Answer

Bind an event handler to the focus event of the select to capture the previous value   Then set the value of the select to the previous value when reset is clicked   var previousValue           my select   on  focus  function        previousValue     this  val             reset   on  click   function             my select   val previousValue         Working Example  http   jsfiddle net T8sCf 17

User · Answer

This code will help you out    lt html gt   lt head gt       lt script type  text JavaScript  src  jquery-2 0 2 min js  gt  lt  script gt       lt script type  text JavaScript  gt            function                var defaultValue       my select   val                    reset   click function                          my select   val defaultValue                                    lt  script gt   lt  head gt   lt body gt       lt select id  my select  gt           lt option value  a  gt a lt  option gt           lt option value  b  selected  selected  gt b lt  option gt           lt option value  c  gt c lt  option gt       lt  select gt       lt div id  reset  gt           lt input type  button  value  reset   gt       lt  div gt   lt  body gt

User · Answer

If using Spring forms  you may need to reset the selected to your options label  You would set your form select id value to an empty string resets your selection to the label as the default    lt form select path  myBeanAttribute  id  my select  gt       lt form option value    label  --Select One--   gt       lt form options items    mySelectionValueList    gt   lt  form select gt        reset   on  click   function                  my select   val             in the case where there s a reset button  Otherwise      my select   val

[javascript] Reset select value to default

Examples related to javascript

Examples related to jquery

Examples related to html