Hiding all but first table row with jQuery
<p>I have a table with a drop-down html selector in the first row. The first option is blank.</p>

<p>I need to hide all rows in the table except the ones that match selector value. If the first option is selected -- hide all rows below. The reason i used class for TRs, because there could be multiple rows for some matched options.</p>

<p><strong>JS</strong></p>

<pre><code>$("#mySelector").change(function(){
    opt = $(this).val();
    if(opt != "") {
        $("." + opt).show();
    } else {
        $("#myTbl tr:not(first-child)").hide(); 
    }
});
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;table id="myTbl"&gt;
&lt;tr&gt;
   &lt;td&gt;
    &lt;select id="mySelector"&gt;
    &lt;option&gt; select one
    &lt;option value="val1"&gt; v1
    &lt;option value="val2"&gt; v12
    &lt;option value="val3"&gt; v3
    &lt;/selector&gt;
   &lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="val1"&gt;
   &lt;td&gt;
    asdasd 1
   &lt;/td&gt;
&lt;/tr&gt;

&lt;tr class="val2"&gt;
   &lt;td&gt;
    asdasd 2
   &lt;/td&gt;
&lt;/tr&gt;

&lt;tr class="val3"&gt;
   &lt;td&gt;
    asdasd 3
   &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>It seems like it should work, but it doesn't. What am I missing?</p>
