title: Using Jquery to hide form elements based on selected dropdown option
body: <p>I have a form that has a dropdown menu, a few text fields and a text area. I would like the form to hide the text area if one of the options from the dropdown menu is selected. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;form id="contact" name="contact" action="" method="post"&gt;
  &lt;select name='select-question'&gt;
      &lt;option value="member-request"&gt;Become a member&lt;/option&gt;
      &lt;option value="question"&gt;Send us your questions / comments&lt;/option&gt;
  &lt;/select&gt;
  Name:
  &lt;input type="text" name="last-name"&gt;&lt;/input&gt;
  Comments/questions:&lt;/br&gt;
  &lt;textarea id="comments" name="questions-field" rows="5" cols="27"&gt;&lt;/textarea&gt;
  &lt;br /&gt;
  &lt;input type="submit" name="submit" value="Submit"&gt;&lt;/input&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>$(document).ready(function () {
      $('#contact select[name="select-question"]').change(function () {
          if ($('#contact select[name="select-question"]').val() == 'question') {
              $('#comments').show();
          } else {
              $('#comments').hide();
          }
      });
  });
  </code></pre>
  
  <p>I have also posted to JS fiddle: <a href="http://jsfiddle.net/7wzUG/5/" rel="nofollow">http://jsfiddle.net/7wzUG/5/</a></p>
  
  <p>I'm very new to JQuery, and I am not sure why this does not work. 
  Thanks for any help.</p>