title: HTML form show fields depending on drop down selected
body: <p>Having an issue here. Trying to make certain fields appear depending on what has been selected in a drop down box. I"ve had a look on stack and have tried editing the code here:
  <a href="http://jsfiddle.net/tarleton/p8ARq/15/" rel="nofollow">http://jsfiddle.net/tarleton/p8ARq/15/</a>
  to work with mine. I cannot seem to get it to work...total newbie here so any help appreciated.</p>
  
  <pre><code>$("select").change(function () {
      // hide all optional elements
      $('.optional').css('display','none');
  
      $("select option:selected").each(function () {
          if($(this).name() == "test") {
              $('.test').css('display','block');
          } else if($(this).val() == "test2") {
              $('.test2').css('display','block');
          }
      });
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form class="contact" name="contact" action="#" method="post"&gt;
         &lt;div id="styled-select"&gt;
             &lt;select&gt;
              &lt;option name="test" value="Option 1" &gt;Referral&lt;/option&gt;
                &lt;option name="test2"value="Option 2"&gt;Other&lt;/option&gt;
                &lt;/select&gt;
         &lt;/div&gt;
            &lt;input class="optional test" name="revealtest" style="display:none;" class="hidden-txt"&gt;
  
         &lt;input class="optional other" name="revealtest2" value="" style="display:none;" class="hidden-txt"&gt;
  
  &lt;/form&gt;
  </code></pre>