Show-Hide Based on Select Option

javascript show hidden div when select option is selected:

Method-1 (JavaScript):::::::::::::

HTML:

<select name="form_select" onchange="showDiv(this)">

   <option value="0">No</option>

   <option value="1">Yes</option>

</select>

<div id="hidden_div" style="display:none;">Hello hidden content</div>

Script:

<script type="text/javascript">

function showDiv(select){

   if(select.value==1){

    document.getElementById('hidden_div').style.display = "block";

   } else{

    document.getElementById('hidden_div').style.display = "none";

   }

} 

</script>




Method-2 (JQuery):::::::::::::

HTML:

<select id='profile'>
  <option value="0">Select</option>
  <option value="1">Show</option>
  <option value="2">Hide</option>
</select>
<div style='display:none;margin-top:20px;' id='name'>Enter Name
    <br/>
    <input type='text' class='text' name='business' value size='20' />
    <br/>
</div>

JQuery:

$(document).ready(function(){
    $('#profile').on('change', function() {
      if ( this.value == '1')
      {
        $("#name").show();
      }
      else
      {
        $("#name").hide();
      }
    });
});

If more options select:::::

$(document).ready(function(){
    $('#profile').on('change', function() {
      if ( this.value == '1')
      {
        $("#name").show();
      }
      else  if ( this.value == '3')  /*****Value 2 or 3 or 4 etc.*************/
      {
        $("#name").show();
      }
      else
      {
        $("#name").hide();
      }
    });
});