title: jQuery hide(); and show(); issue in Internet Explorer
body: <p>I've been wrestling with Internet Explorer for a few hours now and can't seem to figure out my problem. I'm trying to achieve a simple "group option switcher" with jQuery show() and hide().</p>
  
  <p>It's probably best if you look at my demo to see what I mean: <a href="http://softwaredb.org/test/jquery-multi-select.html" rel="nofollow">http://softwaredb.org/test/jquery-multi-select.html</a></p>
  
  <p>My code works in every browser except IE. My code is this...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Demo - Jquery Multi Select box&lt;/title&gt;
    &lt;style type="text/css"&gt;
    select{width:200px;height:200px;}
    select#boysnames, select#girlsnames{display:none;}
    &lt;/style&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="wrapper" style="padding:50px 0 0 50px;"&gt;
  
  &lt;form&gt;      
      &lt;select multiple="multiple" id="theoptions"&gt;
          &lt;option value="boysnames"&gt;Boys Names&lt;/option&gt;
          &lt;option value="girlsnames"&gt;Girls Names&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;select multiple="multiple" id="placeholder"&gt;
      &lt;/select&gt;
  
      &lt;select multiple="multiple" id="boysnames"&gt;
          &lt;option&gt;John&lt;/option&gt;
          &lt;option&gt;David&lt;/option&gt;
          &lt;option&gt;Tom&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;select multiple="multiple" id="girlsnames"&gt;
          &lt;option&gt;Jenny&lt;/option&gt;
          &lt;option&gt;Amanda&lt;/option&gt;
          &lt;option&gt;Sara&lt;/option&gt;
      &lt;/select&gt;
  &lt;/form&gt;
  &lt;/div&gt; &lt;!-- end #wrapper --&gt;
  
  &lt;script type="text/javascript"&gt;
  $('option[value="boysnames"]').click(function() {
      $('select#placeholder, select#girlsnames').hide();
      $('select#boysnames').show();
  });
  $('option[value="girlsnames"]').click(function() {
      $('select#placeholder, select#boysnames').hide();
      $('select#girlsnames').show();
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My logic is... on click, hide all other select tags and show the one I'd like to see. It seems to work fine, until I try in IE. Any ideas what I'm doing wrong? I'm very new to jquery (and javascript/programming in general) so forgive me if this is a dumb question.</p>