title: jQuery filter on color and category
body: <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>