title: Simple Product Filter Using Javascript and Jquery
body: <p>I am creating a simple product filter using JQUERY. The result are showing for the check box values but not for Select Box Values. I would like to use both features. The results are showing according to the DIV class "xxx" value applied on each product. You can find a live example at:  [Demo]:   <a href="http://jsfiddle.net/shamsmaxcom/rc5ctjez/" rel="nofollow">http://jsfiddle.net/shamsmaxcom/rc5ctjez/</a>? "click here for live demo"  And the source code is pasted below. Please help. Thanks</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div id="solution_finder"&gt;
    &lt;h1 style="font-size:27px; margin-top:45px; margin-left:40px; font-weight:normal;"&gt; Product Filter &lt;/h1&gt;
    &lt;ul id="filters" style="list-style:none; margin-top:25px; line-height:30px; "&gt;
      &lt;li&gt;
        &lt;input type="checkbox" value="all" checked="checked" id="all" style="display:none;"&gt;
      &lt;/li&gt;
       &lt;li&gt;
        &lt;input type="checkbox" value="3xzoom" id="3xzoom"&gt;
        &lt;label for="filter-category"&gt;3x video zoom&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;input type="checkbox" value="touch" id="touch"&gt;
        &lt;label for="filter-category"&gt;Touch ID&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;input type="checkbox" value="burstmode" id="burstmode"&gt;
        &lt;label for="filter-category"&gt;Burst mode&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;input type="checkbox" value="antireflective" id="antireflective"&gt;
        &lt;label for="filter-category"&gt;Antireflective coating&lt;/label&gt;
      &lt;/li&gt;
      
    &lt;/ul&gt;
    &lt;div style="margin-left:43px;"&gt;
    &lt;select id="genre" onChange="return selectOption();"&gt;
      &lt;option value="All"&gt;All&lt;/option&gt;
      &lt;option value="with-retina"&gt;With Retina Display&lt;/option&gt;
      &lt;option value="without-retina"&gt;Without Retina Display&lt;/option&gt;
    &lt;/select&gt;
    &lt;/div&gt;
    &lt;div style="width:840px; height:148px; clear:both; margin-top:40px; margin-left:43px;"&gt;
    
      &lt;div id="so_air2" class="category 3xzoom touch burstmode antireflective with-retina all" &gt;&lt;a href="#" &gt;&lt;h1&gt;iPad Air 2&lt;/h1&gt; &lt;/a&gt;&lt;/div&gt;
      &lt;div id="so_air" class="category 3xzoom with-retina all" &gt;&lt;a href="#" &gt;&lt;h1&gt;iPad Air&lt;/h1&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div id="so_mini3" class="category 3xzoom touch with-retina all" &gt;&lt;a href="#" &gt;&lt;h1&gt;iPad mini 3&lt;/h1&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div id="so_mini2" class="category 3xzoom with-retina all" &gt;&lt;a href="#" &gt; &lt;h1&gt;iPad mini 2&lt;/h1&gt; &lt;/a&gt;&lt;/div&gt;
      &lt;div id="so_mjni" class="category all" &gt;&lt;a href="#" &gt; &lt;h1&gt;iPad mini&lt;/h1&gt; &lt;/a&gt;&lt;/div&gt;
            
    &lt;/div&gt;
    &lt;script type="text/javascript"&gt;
  $('input').change (function() {
          var selector = $('input:checkbox').map(function(){ 
              return this.checked ? '.' + this.id : ''; 
          }).get().join('');
          var all = $('div[class^="category"]');
          if(selector.length)
            all.hide().filter(selector).show()
          else all.hide();
        });
   &lt;/script&gt; 
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>