How can I show a hidden div when a select option is selected

Question

I want to use plain JavaScript  I have a drop down list   lt select gt  with a number of  lt option gt s   When a certain option is selected I want a hidden div to display   lt select id  quot test quot  name  quot form select quot  gt      lt option value  quot 0 quot  gt No lt  option gt      lt option value   quot 1 quot  onClick quot showDiv   quot  gt Yes lt  option gt   lt  select gt   lt div id  quot hidden div quot  style  quot display  none  quot  gt Hello hidden content lt  div gt   Then I m trying it with this vanilla JavaScript code  function showDiv       document getElementById  hidden div   style display    quot block quot      I m guessing my problem is with the onClick trigger in my options but I m unsure on what else to use

User · Answer

Try handling the change event of the select and using this value to determine whether it s  Yes  or not   jsFiddle  JS  document getElementById  test   addEventListener  change   function          var style   this value    1    block     none       document getElementById  hidden div   style display   style        HTML   lt select id  test  name  form select  gt      lt option value  0  gt No lt  option gt      lt option value   1  gt Yes lt  option gt   lt  select gt    lt div id  hidden div  style  display  none   gt Hello hidden content lt  div gt

User · Answer

Being more generic  passing values from calling element  which is easier to maintain     Specify the start condition in the text field  display none  Pass the required option value to show hide on   Other    Pass the target and field to show hide   TitleOther      x000D   x000D  function showHideEle selectSrc  targetEleId  triggerValue     x000D   if selectSrc value  triggerValue    x000D    document getElementById targetEleId  style display    inline-block   x000D     else   x000D    document getElementById targetEleId  style display    none   x000D     x000D     x000D   lt select id  Title  x000D     onchange  showHideEle this   TitleOther    Other    gt  x000D         lt option value    gt -- Choose lt  option gt  x000D         lt option value  Mr  gt Mr lt  option gt  x000D         lt option value  Mrs  gt Mrs lt  option gt  x000D         lt option value  Miss  gt Miss lt  option gt  x000D         lt option value  Other  gt Other -- amp gt  lt  option gt        x000D   lt  select gt  x000D   lt input id  TitleOther  type  text  title  Title other  placeholder  Other title   x000D      style  display none    gt  x000D   x000D   x000D

User · Answer

lt select id  test  name  form select  onchange  showDiv    gt      lt option value  0  gt No lt  option gt      lt option value   1  gt Yes lt  option gt   lt  select gt   lt div id  hidden div  style  display  none   gt Hello hidden content lt  div gt   lt script gt      function showDiv            getSelectValue   document getElementById  test   value          if getSelectValue     1                document getElementById  hidden div   style display  block            else              document getElementById  hidden div   style display  none                    lt  script gt

User · Answer

take look at my solution  i want to make visaCard-note div to be visible only if selected cardType is visa  and here is the html   lt select name  cardType  gt       lt option value  1  gt visa lt  option gt       lt option value  2  gt mastercard lt  option gt   lt  select gt    here is the js  var visa  1    visa is selected by default     select name cardType    change function          document getElementById  visaCard-note   style visibility   this value  visa    visible     hidden

User · Answer

You should hook onto the change event of the  lt select gt  element instead of on the individual options   var select   document getElementById  test    onChange   function event        var shown   this options this selectedIndex  value    1       document getElementById  hidden div   style display   shown    block     none          attach event handler if  window addEventListener        select addEventListener  change   onChange  false     else          of course  IE  lt  9 needs special treatment     select attachEvent  onchange   function             onChange apply select  arguments               Demo

User · Answer

I think this is an appropriate solution   x000D   x000D   lt select id  test  name  form select  onchange  showDiv this   gt      lt option value  0  gt No lt  option gt      lt option value  1  gt Yes lt  option gt   lt  select gt   lt div id  hidden div  style  display none   gt Hello hidden content lt  div gt    lt script type  text javascript  gt  function showDiv select      if select value  1       document getElementById  hidden div   style display    block        else      document getElementById  hidden div   style display    none            lt  script gt  x000D   x000D   x000D

User · Answer

Check this code  It awesome code for hide div using select item      HTML   lt select name  name  id  cboOptions  onchange  showDiv  div  this   class  form-control   gt       lt option value  1  gt YES lt  option gt       lt option value  2  gt NO lt  option gt   lt  select gt    lt div id  div1  style  display block   gt       lt input type  text  id  customerName  class  form-control  placeholder  Type Customer Name     gt       lt input type  text  style  margin-top  3px   id  customerAddress  class  form-control  placeholder  Type Customer Address     gt       lt input type  text  style  margin-top  3px   id  customerMobile  class  form-control  placeholder  Type Customer Mobile     gt   lt  div gt   lt div id  div2  style  display none   gt       lt input type  text  list  cars  id  customerID  class  form-control  placeholder  Type Customer Name     gt       lt datalist id  cars  gt           lt option gt Value 1 lt  option gt           lt option gt Value 2 lt  option gt           lt option gt Value 3 lt  option gt           lt option gt Value 4 lt  option gt       lt  datalist gt   lt  div gt    JS   lt script gt      function showDiv prefix chooser                     for var i 0 i lt chooser options length i                                   var div   document getElementById prefix chooser options i  value                   div style display    none                              var selectedOption    chooser options chooser selectedIndex  value                if selectedOption     1                                 displayDiv prefix  1                              if selectedOption     2                                 displayDiv prefix  2                             function displayDiv prefix suffix                     var div   document getElementById prefix suffix               div style display    block          lt  script gt

User · Answer

you can use the following common function    lt div gt        lt select class  form-control                name  Extension for area validity sought for                onchange  CommonShowHide  txtc1opt2   this   States          gt            lt option value  All India  gt All India lt  option gt            lt option value  States  gt States lt  option gt        lt  select gt         lt input type  text               id  txtc1opt2               style  display none                name  Extension for area validity sought for details               class  form-control               value                 placeholder    gt    lt  div gt     lt script gt      function CommonShowHide ElementId  element  value             document               getElementById ElementId                style               display   element value    value    block     none          lt  script gt

User · Answer

try this    x000D   x000D  function showDiv divId  element  x000D    x000D      document getElementById divId  style display   element value    1    block     none   x000D    x000D   hidden div   x000D      display  none  x000D    x000D   lt select id  test  name  form select  onchange  showDiv  hidden div   this   gt  x000D      lt option value  0  gt No lt  option gt  x000D      lt option value  1  gt Yes lt  option gt  x000D   lt  select gt  x000D   lt div id  hidden div  gt This is a hidden div lt  div gt  x000D   x000D   x000D

[javascript] How can I show a hidden div when a select option is selected?

Examples related to javascript

Examples related to html

Examples related to event-handling