jQuery hide(); and show(); issue in Internet Explorer
<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>
