title: How to show form input fields based on select value?
body: <p>I know this is simple, and I need to search in Google. I tried my best and I could not find a better solution. I have a form field, which takes some input and a select field, which has some values. It also has "Other" value. </p>
  
  <p>What I want is: </p>
  
  <p>If the user selects the 'Other' option, a text field to specify that 'Other' should be displayed. When a user selects another option (than 'Other') I want to hide it again. How can I perform that using JQuery? </p>
  
  <p>This is my JSP code</p>
  
  <pre><code>&lt;label for="db"&gt;Choose type&lt;/label&gt;
  &lt;select name="dbType" id=dbType"&gt;
     &lt;option&gt;Choose Database Type&lt;/option&gt;
     &lt;option value="oracle"&gt;Oracle&lt;/option&gt;
     &lt;option value="mssql"&gt;MS SQL&lt;/option&gt;
     &lt;option value="mysql"&gt;MySQL&lt;/option&gt;
     &lt;option value="other"&gt;Other&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id="otherType" style="display:none;"&gt;
    &lt;label for="specify"&gt;Specify&lt;/label&gt;
    &lt;input type="text" name="specify" placeholder="Specify Databse Type"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I want to show the DIV tag**(id="otherType")** only when the user selects Other.
  I want to try JQuery. This is the code I tried</p>
  
  <pre><code>&lt;script type="text/javascript"
      src="jquery-ui-1.10.0/tests/jquery-1.9.0.js"&gt;&lt;/script&gt;
  &lt;script src="jquery-ui-1.10.0/ui/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script&gt;    
  $('#dbType').change(function(){
  
     selection = $('this').value();
     switch(selection)
     {
         case 'other':
             $('#otherType').show();
             break;
         case 'default':
             $('#otherType').hide();
             break;
     }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>But I am not able to get this. What should I do? Thanks</p>