Want to show hide div based on dropdown box selection

Question

I want to have jQuery show div id  business  only if  business use  is selected in the dropdown box   This is my code    lt script src  http   ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt   lt  script gt   lt script gt      purpose   on  change   function       if   this value     1                business   show          else             business   hide                 lt  script gt   lt body gt   lt select id  purpose  gt   lt option value  0  gt Personal use lt  option gt   lt option value  1  gt Business use lt  option gt   lt option value  2  gt Passing on to a client lt  option gt   lt  select gt   lt div style  display none   id  business  gt Business Name lt br  gt  amp nbsp   lt br  gt  amp nbsp       lt input type  text  class  text  name  business  value size  20    gt       lt br  gt   lt  div gt   lt  body gt    and the JSFiddle  http   jsfiddle net 2kGzZ 1

User · Answer

https   www tutorialrepublic com codelab php topic faq amp file jquery-show-hide-div-using-select-box It s working well in my case   x000D   x000D    document  ready function    x000D         select   change function    x000D            this  find  option selected   each function    x000D              var optionValue     this  attr  value    x000D              if optionValue   x000D                      box   not       optionValue  hide    x000D                          optionValue  show    x000D                else  x000D                      box   hide    x000D                x000D              x000D         change    x000D      x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D   lt meta charset  utf-8  gt  x000D   lt title gt jQuery Show Hide Elements Using Select Box lt  title gt  x000D   lt style gt  x000D       box  x000D          color   fff  x000D          padding  50px  x000D          display  none  x000D          margin-top  10px  x000D        x000D       red  background   ff0000    x000D       green  background   228B22    x000D       blue  background   0000ff    x000D   lt  style gt  x000D   lt script src  https   code jquery com jquery-1 12 4 min js  gt  lt  script gt  x000D   x000D   lt  head gt  x000D   lt body gt  x000D       lt div gt  x000D           lt select gt  x000D               lt option gt Choose Color lt  option gt  x000D               lt option value  red  gt Red lt  option gt  x000D               lt option value  green  gt Green lt  option gt  x000D               lt option value  blue  gt Blue lt  option gt  x000D           lt  select gt  x000D       lt  div gt  x000D       lt div class  red box  gt You have selected  lt strong gt red option lt  strong gt  so i am here lt  div gt  x000D       lt div class  green box  gt You have selected  lt strong gt green option lt  strong gt  so i am here lt  div gt  x000D       lt div class  blue box  gt You have selected  lt strong gt blue option lt  strong gt  so i am here lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

lt script src  http   ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt   lt  script gt   lt script gt    document  ready function            purpose   on  change   function           if   this value     1                                                                business new   hide                business   show                  else  if   this value     2                         business   hide                business new   show                   else                       business   hide                         lt  script gt   lt body gt   lt select id  purpose  gt   lt option value  0  gt Personal use lt  option gt   lt option value  1  gt Business use lt  option gt   lt option value  2  gt Passing on to a client lt  option gt   lt  select gt   lt div style  display none   id  business  gt Business Name lt br  gt  amp nbsp   lt br  gt  amp nbsp       lt input type  text  class  text  name  business  value size  20    gt       lt input type  text  class  text  name  business  value size  20    gt       lt br  gt   lt  div gt   lt div style  display none   id  business new  gt Business Name lt br  gt  amp nbsp   lt br  gt  amp nbsp       lt input type  text  class  text  name  business  value  1254  size  20    gt       lt input type  text  class  text  name  business  value size  20    gt       lt br  gt   lt  div gt   lt  body gt

User · Answer

you have error in your code unexpected token use         purpose   on  change   function         if  this value     1             business   show          else           business   hide                   Demo  Update  You can narrow down the code using  toggle         purpose   on  change   function             business   toggle this value     1

User · Answer

try this which is working for me in my test demo   lt script gt    document  ready function        dropdown   change function           var selectedValue   parseInt jQuery this  val     var text       dropdown   val      alert  text          Depend on Value i e  0 or 1 respective function gets called       switch text           case  Reporting                alert  hello1           td1   hide                break          case  Buyer           alert  hello             td1   show                   break            etc             default              alert  catch default                break                  lt  script gt

User · Answer

The core problem is the js errors       purpose   on  change   function             if  this value     1      No semicolon and I used     instead of        if  this value      1                business   show          else               business   hide                     remove   http   jsfiddle net Bushwazi 2kGzZ 3   I had to clean up the html  amp  js   I couldn t help myself   HTML    lt select id  purpose  gt       lt option value  0  gt Personal use lt  option gt       lt option value  1  gt Business use lt  option gt       lt option value  2  gt Passing on to a client lt  option gt   lt  select gt   lt form id  business  gt       lt label for  business  gt Business Name lt  label gt       lt input type  text  class  text  name  business  value size  20    gt   lt  form gt    CSS     business     display none      JS       purpose   on  change   function          if this value      1                business   show          else               business   hide

User · Answer

Wrap the code within   document  ready function                  handler   also remove the   after if    document  ready function            purpose   on  change   function           if   this value     1                                                             business   show                  else                     business   hide                          Fiddle Demo

User · Answer

You need to either put your code at the end of the page or wrap it in a document ready call  otherwise you re trying to execute code on elements that don t yet exist  Also  you can reduce your code to       purpose   on  change   function              business   css  display    this value     1      block     none          jsFiddle example

[javascript] Want to show/hide div based on dropdown box selection

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to input