jcadima
5/23/2016 - 7:34 PM

Display content based on dropdown selection

Display content based on dropdown selection

new_gist_file.html
content_copyfile_download
http://jsfiddle.net/yg4adqva/



<body>
<select id='purpose'>
<option value="0">Choose one</option>
<option value="1">Business use</option>
<option value="2">Personal</option>
</select>
<div style='display:none;' id='business'>Business Name<br/>&nbsp; 
<select id="samson_division_1" name="samson_division_1" class="form-control">
	<option value=" -- ">Divisions</option>
	<option value="Football - Division Male">Youth (8-13) *perform single events only
</option>
	<option value="Teen (14- 17)">Teen (14- 17)
</option>
	<option value="Adult (18 - 35)">Adult (18 - 35)
</option>
	<option value="Masters (35 & up)">Masters (35 & up)
</option>
</select>

</div>




<div style='display:none;' id='personal'>personal Name<br/>&nbsp;
<select id="samson_division_2" name="samson_division_2" class="form-control">
	<option value=" -- ">Divisions</option>
	<option value="Baseball">Baseball</option>
	<option value="Basketball">Basketball</option>
	<option value="CrossFit">CrossFit ® </option>
	<option value="Cross Country">Cross Country</option>
	<option value="Hockey">Hockey</option>
	<option value="Soccer">Soccer</option>
	<option value="Tennis">Tennis</option>
	<option value="Track & Field">Track & Field</option>
	<option value="Wrestling">Wrestling</option>
	<option value="Other (open space for input)">Other (open space for input)</option>
</select>

</div>

</body>




<script>
  
$(document).ready(function(){
    $('#purpose').on('change', function() {
      if ( this.value == '1')
      {
        $("#business").show();
         $("#personal").hide();
      }
      
       if ( this.value == '2')
      {
        $("#personal").show();
        $("#business").hide();
      }     
      

    });
});  
  
</script>