Reset the Value of a Select Box

Question

I m trying to reset the value of two select fields  structured like this    lt select gt     lt option gt  lt  option gt     lt option gt  lt  option gt     lt option gt  lt  option gt   lt  select gt    lt select gt     lt option gt  lt  option gt     lt option gt  lt  option gt     lt option gt  lt  option gt   lt  select gt    jQuery      select   each function idx  sel        sel  find  option  eq 0    attr  selected   true         Unfortunately  no matter how many ways I try it  it just doesn t happen  Nothing in the console  I have no idea what s going on  I know there has to be a way to do this  you can do anything with JS  EDIT    I figured out that the issue only occurs when I try to fire the code on the click of a dom element  however  I know that the code should be working  because when I have     p   click function      console log  test          It outputs  test  to the console  but when I include the code in this function  nothing happens  Why is this

User · Answer

Further to  RobG s pure   vanilla javascript answer  you can reset to the  default  value with  selectElement selectedIndex   null    It seems -1 deselects all items  null selects the default item  and 0 or a positive number selects the corresponding index option      Options in a select object are indexed in the order in which they are defined  starting with an index of 0    source

User · Answer

I found a little utility function a while back and I ve been using it for resetting my form elements ever since  source  http   www learningjquery com 2007 08 clearing-form-data    function clearForm form          iterate over all of the inputs for the given form element        input   form  each function           var type   this type        var tag   this tagName toLowerCase       normalize case          it s ok to reset the value attr of text inputs          password inputs  and textareas       if  type     text     type     password     tag     textarea            this value                checkboxes and radios need to have their checked state cleared         but should  not  have their  value  changed       else if  type     checkbox     type     radio            this checked   false           select elements need to have their  selectedIndex  property set to -1           this works for both single and multiple select elements        else if  tag     select            this selectedIndex   -1                  or as a jQuery plugin       fn clearForm   function        return this each function           var type   this type  tag   this tagName toLowerCase          if  tag     form            return     input  this  clearForm          if  type     text     type     password     tag     textarea            this value             else if  type     checkbox     type     radio            this checked   false        else if  tag     select            this selectedIndex   -1

User · Answer

use the  val     setter  jsfiddle example     select   val  1

User · Answer

The easiest method without using javaScript is to put all your  lt select gt  dropdown inside a  lt form gt  tag and use form reset button  Example   lt form gt     lt select gt       lt option gt one lt  option gt       lt option gt two lt  option gt       lt option selected gt three lt  option gt     lt  select gt     lt input type  quot reset quot  value  quot Reset quot    gt   lt  form gt   Or  using JavaScript  it can be done in following way  HTML Code   lt select gt     lt option selected gt one lt  option gt     lt option gt two lt  option gt     lt option gt three lt  option gt   lt  select gt   lt button id  quot revert quot  gt Reset lt  button gt   And JavaScript code  const button   document getElementById  quot revert quot    const options   document querySelectorAll  select option    button onclick        gt      for  var i   0  i  lt  options length  i          options i  selected   options i  defaultSelected         Both of these methods will work if you have multiple selected items or single selected item

User · Answer

This works for me      select   prop  selectedIndex   0     FIDDLE

User · Answer

neRok touched on this answer above and I m just expanding on it   According to the slightly dated  but handy O Reilly reference book  Javascript  The Definitive Guide      The selectedIndex property of the Select object is an integer that specifies the index of the selected option within the Select object   If no option is selected  selectedIndex is -1    As such  the following javascript code will  reset  the Select object to no options selected   select box   document getElementById  myselectbox    select box selectedIndex   -1    Note that changing the selection in this way does not trigger the onchange   event handler

User · Answer

I presume you only want to reset a single element  Resetting an entire form is simple  call its reset method   The easiest way to  reset  a select element is to set its selectedIndex property to the default value  If you know that no option is the default selected option  just set the select elemen ts selectedIndex property to an appropriate value   function resetSelectElement selectElement        selecElement selectedIndex   0      first option is selected  or                                         -1 for no option selected     However  since one option may have the selected attribtue or otherwise be set to the default selected option  you may need to do   function resetSelectElement selectElement        var options   selectElement options          Look for a default selected option     for  var i 0  iLen options length  i lt iLen  i               if  options i  defaultSelected                selectElement selectedIndex   i              return                          If no option is the default  select first or none as appropriate     selectElement selectedIndex   0     or -1 for no option selected     And beware of setting attributes rather than properties  they have different effects in different browsers

User · Answer

What worked for me was      select option   each function     this  removeAttr  selected

[javascript] Reset the Value of a Select Box

Examples related to javascript

Examples related to jquery