filter function always returns null
<p>I have a select which I would like to use to filter a table rows based on the data attribute.</p>

<p>E.g:</p>

<pre><code>&lt;select&gt;
    &lt;option value="0"&gt;View all&lt;/option&gt;
    &lt;option value="1"&gt;Foo1&lt;/option&gt;
    &lt;option value="2"&gt;Foo2&lt;/option&gt;
    &lt;option value="3"&gt;Foo3&lt;/option&gt;
&lt;/select&gt;

&lt;table&gt;
    &lt;tr data-foo="1"&gt;
        &lt;td&gt;Foo&lt;/td&gt;
        &lt;td&gt;Foo&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr data-foo="2"&gt;
        &lt;td&gt;Foo2&lt;/td&gt;
        &lt;td&gt;Foo2&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr data-foo="1"&gt;
        &lt;td&gt;Foo&lt;/td&gt;
        &lt;td&gt;Foo&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr data-foo="2"&gt;
        &lt;td&gt;Foo2&lt;/td&gt;
        &lt;td&gt;Foo2&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr data-foo="3"&gt;
        &lt;td&gt;Foo3&lt;/td&gt;
        &lt;td&gt;Foo3&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>I have this but the <code>filter</code> is not working in doesn't show any rows. </p>

<pre><code>$("select").change(function() {
    $("tr").hide().filter(function(index){
        return ($(this).data("foo") == this.value || this.value == 0);
    }).show();
});
</code></pre>
