Change selected option by value on select list with jQuery | jQuery change() Method

This is a good example of jQuery change() method. A area will be appear
when we select drop down value.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
 <script>  
   $(document).ready(function () {  
     $('#gender').on('change', function () {  
       if (this.value == 'male') {  
         $("#male").show();  
         $("#female").hide();  
       }  
       else if (this.value == 'female') {  
         $("#male").hide();  
         $("#female").show();  
       } else {  
         $("#male").hide();  
         $("#female").hide();  
       }  
     });  
   });  
 </script>  
 <p>Change selected option by value on select list with jQuery</p>  
 <select id='gender'>  
   <option value="0">- Select One -</option>  
   <option value="male">Male</option>  
   <option value="female">Female</option>  
 </select>  
 <div style='display:none; margin-top: 100px' id='male'>  
   <label>Male Name</label>  
   <input type='text' class='text' name='male' value size='20' />  
 </div>  
 <div style='display:none; margin-top: 100px' id='female'>  
   <label>Female Name</label>  
   <input type='text' class='text' name='female' value size='20' />  
 </div>  

Click to download from here.