How to change a select value from JavaScript

Question

I have question that seems very simple  but I just can t get it right  I have a  lt select gt  with a list of options and a default value  After the user selects an option and clicks on a button  I want the select to go back to its default value     lt select id  select  gt    lt option value  defaultValue  gt Default lt  option gt    lt option value  Option1  gt Option1 lt  option gt    lt option value  Option2  gt Option2 lt  option gt       lt  select gt   lt input type  button  value  CHANGE  onclick  selectFunction      gt    So lets suppose the user selects Option 1  I get that value with javascript but after that  I want the select to show again  Default    I found that doing document getElementById  select   value    defaultValue  won t work    Does anyone know how to change that value back to the default

User · Answer

lt script language  javascript  type  text javascript  gt          function selectFunction                  var printStr   document getElementById  select   options 0  value             alert printStr               document getElementById  select   selectedIndex   0                 lt  script gt

User · Answer

You can use the selectedIndex property to set it to the first option   document getElementById  select   selectedIndex   0

User · Answer

Once you have done your processing in the selectFunction   you could do the following  document getElementById  select   selectedIndex   0  document getElementById  select   value    Default

User · Answer

I think I know what the problem is here - if you are trying to have it select an option that doesn t exist  it won t work  You need to ADD the option first  Like so   var option document createElement  option    option text document getElementById  other referee   value document getElementById  referee new   add option null   document getElementById  referee new   value   document getElementById  other referee   value    Not elegant  but you get the idea

User · Answer

I found that doing document getElementById  select   value    defaultValue  wont work    You must be experiencing a separate bug  as this works fine in this live demo   And here s the full working code in case you are interested    lt  DOCTYPE html gt   lt html gt   lt head gt       lt meta http-equiv  content-type  content  text html  charset UTF-8  gt       lt title gt Demo lt  title gt       lt script type  text javascript  gt          var selectFunction   function                 document getElementById  select   value    defaultValue                   lt  script gt   lt  head gt   lt body gt       lt select id  select  gt           lt option value  defaultValue  gt Default lt  option gt           lt option value  Option1  gt Option1 lt  option gt           lt option value  Option2  gt Option2 lt  option gt           lt  select gt       lt input type  button  value  CHANGE  onclick  selectFunction      gt   lt  body gt   lt  html gt

User · Answer

document getElementById  select   selectedIndex   0 will work

User · Answer

If you would like it to go back to first option try this      document getElementById  select   selectedIndex   0

User · Answer

this solved my issue  it was working fine with  var value   item index  id      select2   val value     but not showing selected value  so      select2   val value  change      works fine for me

User · Answer

Setting  value to the value of one of the options works on all vaguely-current browsers  On very old browsers  you used to have to set the selectedIndex   document getElementById  select   selectedIndex   0    If neither that nor your original code is working  I wonder if you might be using IE and have something else on the page creating something called  select    Either as a name or as a global variable   Because some versions of IE have a problem where they conflate namespaces  Try changing the select s id to  fluglehorn  and if that works  you know that s the problem

User · Answer

select   val  defaultValue         select   change      This will also trigger events hooked to this select

[javascript] How to change a <select> value from JavaScript

Examples related to javascript

Examples related to html