title: Jquery Filter <li> on Multiselect
body: <p>I tried to create a filter, which displays li-elements, based on the selected options. It works, when I select just one option, the elements show up when selected and disappear when deselected.</p>
  
  <p>But when multiple option are selected, the elements first appear and then disappear again. I guess something in the loop is wrong?</p>
  
  <p>Javascript:</p>
  
  <pre><code>$(document).ready(function() {
  
    //Hide all li-Elements
    $(".result li").hide();
  
    //When select-Element is change, do something
    $("select").change(function() {
  
      //Create array for selected Options 
      var arr = new Array;
  
      //Add all selected Options to the array
      $("select option:selected").each(function() {
        arr.push($(this).val());
      });
      //Create a Loop to display li-Elements
      for (var i = 0, l = arr.length; i &lt; l; i++) {
  
        /*slideDown all elements which contain one
            of the selected elements in array*/
        $("li:contains(" + arr[i] + ")").slideDown("slow");
        /*slideUp all elements which do not contain
            the selected elements in array*/
        $('li:not(:contains(' + arr[i] + '))').slideUp("slow");
      }
    });
  
  });
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;select multiple&gt;
    &lt;option value="volvo"&gt;volvo&lt;/option&gt;
    &lt;option value="saab"&gt;saab&lt;/option&gt;
    &lt;option value="opel"&gt;opel&lt;/option&gt;
    &lt;option value="audi"&gt;audi&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div class="result"&gt;
    &lt;ul&gt;
      &lt;li&gt;volvo&lt;/li&gt;
      &lt;li&gt;volvo coolio&lt;/li&gt;
      &lt;li&gt;saab&lt;/li&gt;
      &lt;li&gt;opel&lt;/li&gt;
      &lt;li&gt;opelino&lt;/li&gt;
      &lt;li&gt;opel meier&lt;/li&gt;
      &lt;li&gt;audi&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Preview: <a href="https://jsfiddle.net/onclesam/2z56oom2/3/" rel="nofollow">https://jsfiddle.net/onclesam/2z56oom2/3/</a></p>