title: Filter based on combination of multiple select and single select elements
body: <p>I want to filter (show/hide) elements by class. I want to have lets say 5 filters working together.</p>
  
  <pre><code>&lt;select id='filter4'&gt;...&lt;/select&gt;
  &lt;select id='filter5'&gt;...&lt;/select&gt;
  &lt;select id='filter6'&gt;...&lt;/select&gt;
  &lt;select id='filter7'&gt;...&lt;/select&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;select id='filter6' multiple&gt;...&lt;/select&gt;
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>jQuery(document).ready(function ($) {
      $("select").on("change", function () {
          var filterVal = $("select#filter4").val();
          var filterVal2 = $("select#filter5").val();
          var filterVal3 = $("select#filter6").val();
          var filterVal4 = $("select#filter7").val();
          var filterVal5 = $("select#filter8").val();
          var filterSelector = "";
          var filter2Selector = "";
          var filter3Selector = "";
          var filter4Selector = "";
          var filter5Selector = "";
  
          if (filterVal == "all" &amp;&amp; filterVal2 == "all" &amp;&amp; filterVal3 == "all" &amp;&amp; filterVal4 == "all" &amp;&amp; filterVal5 === null) {
              //show all items 
              $(".item").fadeIn("fast");
          } else {
              if (filterVal != "all") {
                  filterSelector = "." + filterVal;
              }
  
              if (filterVal2 != "all") {
                  filter2Selector = "." + filterVal2;
              }
  
              if (filterVal3 != "all") {
                  filter3Selector = "." + filterVal3;
              }
  
              if (filterVal4 != "all") {
                  filter4Selector = "." + filterVal4;
              }
  
              if (filterVal5 !== null) {
                  filter5Selector = "." + filterVal5;
              }
  
              $(".item").hide();
              $(filterSelector + filter2Selector + filter3Selector + filter4Selector + filter5Selector).fadeIn("fast");
          }
  
      });
  });
  </code></pre>
  
  <p>See <a href="http://jsfiddle.net/mahish/dum7n/7/" rel="nofollow">everything in this jsfiddle</a> !</p>
  
  <p>The first four single filters work with any problem. The fifth multi-select element does not work (filter) properly when more than one option is selected.</p>
  
  <p><strong>EDIT</strong>: It was needed to replace commas with dots (multiple css selectors) with help of g modifier (/ /g) which is global match:</p>
  
  <pre><code>$(filter4Selector + filter5Selector.replace(/,/g, ".")).fadeIn("fast");
  </code></pre>
  
  <p>see <a href="http://jsfiddle.net/mahish/dum7n/" rel="nofollow">http://jsfiddle.net/mahish/dum7n/</a> .</p>
  
  <p>Answer below offers different code which works as well! </p>