jQuery filter on color and category
<p>I need jQuery to filter my list on color and category. I made two filters but when I filter on a color and then on a category the other colors I filtered out apear again.
Here's my html and jQuery code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
#scrollable{
    height:920px;
    width:920px;
    overflow: auto;
}
#scrollable li{
    list-style-type:none;
}
.product{
    float:left;
}
.red{
    background:#FF0000;
}
.green{
    background:#00FF00;
}
.blue{
    background:#0000FF;
}
.a{
    width:300px;
    height:300px;
}
.o{
    width:300px;
    height:300px;
}
.k{
    width:300px;
    height:300px;
}
&lt;/style&gt;
&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form&gt;
&lt;select id="cat"&gt;
&lt;option value="all"&gt;All&lt;/option&gt;
&lt;option value="a"&gt;A&lt;/option&gt;
&lt;option value="k"&gt;K&lt;/option&gt;
&lt;option value="o"&gt;O&lt;/option&gt;
&lt;/select&gt;
&lt;label&gt;Red&lt;label&gt;&lt;input type="checkbox" checked=checked name="red" id="red" /&gt;&lt;br /&gt;
&lt;label&gt;Green&lt;label&gt;&lt;input type="checkbox" checked=checked name="green" id="green" /&gt;&lt;br /&gt;
&lt;label&gt;Bleu&lt;label&gt;&lt;input type="checkbox" checked=checked name="blue" id="blue" /&gt;&lt;br /&gt;
&lt;/form&gt;
&lt;ul id="scrollable"&gt;
    &lt;li&gt;&lt;div class="product a red"&gt;R a&lt;/div&gt;&lt;div class="product o blue"&gt;B o&lt;/div&gt;&lt;div class="product k green"&gt;G k&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div class="product o green"&gt;G o&lt;/div&gt;&lt;div class="product k red"&gt;R k&lt;/div&gt;&lt;div class="product o blue"&gt;B o&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div class="product k blue" &gt;R k&lt;/div&gt;&lt;div class="product a green"&gt;G a&lt;/div&gt;&lt;div class="product a red"&gt;R a&lt;/div&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
function catFilter(){
    if ($(this).val() == "a") {
        $(".a").show();
        $(".o").hide();
        $(".k").hide();
    }
    if ($(this).val() == "o") {
        $(".a").hide();
        $(".o").show();
        $(".k").hide();
    }
    if ($(this).val() == "k") {
        $(".a").hide();
        $(".o").hide();
        $(".k").show();
    }
    if ($(this).val() == "all") {
        $(".a").show();
        $(".o").show();
        $(".k").show();
    }
}
function filter() {
    if ($('#red').attr('checked')) {
        $(".red").show();
    } else {
        $(".red").hide();
    }
    if ($('#green').attr('checked')) {
        $(".green").show();
    } else {
        $(".green").hide();
    }
    if ($('#blue').attr('checked')) {
        $(".blue").show();
    } else {
        $(".blue").hide();
    }
}

$(":checkbox").click(filter);
$("#cat").change(catFilter);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Any ideas how to resolve this?</p>

<p>Thanks</p>
