Want to show/hide div based on dropdown box selection

html, input, javascript, jquery

Solution

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

Problem

I want to have jQuery show div id='business' only if 'business use' is selected in the dropdown box. This is my code: ``` <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $('#purpose').on('change', function() { if ( this.value == '1'); { $("#business").show(); } else { $("#business").hide(); } }); }); </script> <body> <select id='purpose'> <option value="0">Personal use</option> <option value="1">Business use</option> <option value="2">Passing on to a client</option> </select> <div style='display:none;' id='business'>Business Name<br/>&nbsp; <br/>&nbsp; <input type='text' class='text' name='business' value size='20' /> <br/> </div> </body> ``` and the JSFiddle: http://jsfiddle.net/2kGzZ/1/

Original source