jQuery how to show/hide Select by Select
<p>I need some help with my jquery script.</p>

<p>I have two <code>select</code> boxes. When I select one options from firs <code>select</code> box the second box should show 3 items from all available options. The script doing it, but also showing me "additional" value at the top of the second <code>select</code> box.</p>

<p>Can someone tell me why?</p>

<p>Here is my HMTL code:</p>

<pre><code>&lt;select id="viewSelector" style="float: left;"&gt;
 &lt;option value="0"&gt;-- Select a View --&lt;/option&gt;       
 &lt;option value="view1"&gt;W&lt;/option&gt;
 &lt;option value="view2"&gt;X&lt;/option&gt;
 &lt;option value="view3"&gt;Y&lt;/option&gt;
 &lt;option value="view4"&gt;Z&lt;/option&gt;
&lt;/select&gt;

&lt;select id="viewSelect1"&gt;

 &lt;option id="view1a"&gt;W1&lt;/option&gt;
 &lt;option id="view1b"&gt;W2&lt;/option&gt; 
 &lt;option id="view1c"&gt;W3&lt;/option&gt;

 &lt;option id="view2a"&gt;X1&lt;/option&gt;
 &lt;option id="view2b"&gt;X2&lt;/option&gt; 
 &lt;option id="view2c"&gt;X3&lt;/option&gt;

 &lt;option id="view3a"&gt;Y1&lt;/option&gt;
 &lt;option id="view3b"&gt;Y2&lt;/option&gt; 
 &lt;option id="view3c"&gt;Y3&lt;/option&gt;

 &lt;option id="view4a"&gt;Z1&lt;/option&gt;
 &lt;option id="view4b"&gt;Z2&lt;/option&gt; 
 &lt;option id="view4c"&gt;Z3&lt;/option&gt;

&lt;/select&gt;
</code></pre>

<p>Here is my jQuery/JavaScript:</p>

<pre><code>$(document).ready(function() {
  $.viewMap = {
    '0' : $([]),
    'view1' : $('#view1a, #view1b, #view1c'),
    'view2' : $('#view2a, #view2b, #view2c'),
    'view3' : $('#view3a, #view3b, #view3c'),
    'view4' : $('#view4a, #view4b, #view4c'),
  };

  $.each($.viewMap, function() { this.hide(); });
    $('#viewSelect1').hide();

  $('#viewSelector').change(function() {
    // hide all
    $.each($.viewMap, function() { this.hide(); });
      $('#viewSelect1').hide();
    // show current
    $.viewMap[$(this).val()].show();
      $('#viewSelect1').show();
  });
});​
</code></pre>

<p>The working example you can find here: <a href="http://jsfiddle.net/amarcinkowski/Sg8Xf/9/" rel="nofollow">http://jsfiddle.net/amarcinkowski/Sg8Xf/9/</a></p>
