title: Trouble showing one element and hiding others based on SELECT option
body: <p>I am using jQuery and what I am trying to do is have an onChange event fire whenever a dropdown SELECT option is chosen that will display an element based on the value of the option selected. The difficult part is that I also want any element displayed to disappear when a new option is chosen so that the chosen element is the only one showing. I am very close but can't understand why what I am trying is not working.</p>
  
  <p>So far what I have is this:</p>
  
  <pre><code>//Dropdown
  &lt;select id="menu"&gt;
  &lt;option val="show1"&gt;Show First&lt;/option&gt;
  &lt;option val="show2"&gt;Show Second&lt;/option&gt;
  ...
  &lt;option val="show255"&gt;Show 255th&lt;/option&gt;
  &lt;/select&gt;
  
  //Invisible areas
  &lt;myArea id="show1" style="display:none"&gt;
  Stuff1
  &lt;/myArea&gt;
  
  &lt;myArea id="show2" style="display:none"&gt;
  Stuff2
  &lt;/myArea&gt;
  
  ...
  
  &lt;myArea id="show255" style="display:none"&gt;
  Stuff255
  &lt;/myArea&gt;
  
  
  //JavaScript
  &lt;script&gt;
  $('#menu').change(function () {
      optName = $('#menu').val();
      $("myArea").not("#" + optName).hide();
      $("myArea").("#" + optName).show();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>So far, what WORKS is that if I don't add the <code>style="display:none"</code> to the <code>&lt;myArea&gt;</code> elements, I can get every element except the chosen one to hide. However, when I change the option again, the already displayed element disappears but the chosen element does not show. If I use <code>style="display:none"</code> on the <code>myArea</code> elements it will not display anything when any option is selected. </p>