多选上的 Jquery 过滤器 <li>

Question

我尝试根据所选选项创建一个显示 li 元素的过滤器。它有效，当我只选择一个选项时，元素在选择时显示，在取消选择时消失。

But when multiple option are selected, the elements first appear and then disappear again.我猜循环中的某些东西是错误的？

Javascript：

$(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 < 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");
    }
  });

});

HTML：

<select multiple>
  <option value="volvo">volvo</option>
  <option value="saab">saab</option>
  <option value="opel">opel</option>
  <option value="audi">audi</option>
</select>

<div class="result">
  <ul>
    <li>volvo</li>
    <li>volvo coolio</li>
    <li>saab</li>
    <li>opel</li>
    <li>opelino</li>
    <li>opel meier</li>
    <li>audi</li>
  </ul>
</div>

预览：https://jsfiddle.net/onclesam/2z56oom2/3/

Answer 1

问题是在每次迭代中你都在重置过滤器，而不是你可以这样做

$(document).ready(function() {

  //Hide all li-Elements
  var $lis = $(".result li").hide();

  //When select-Element is change, do something
  $("select").change(function() {

    //Add all selected Options to the array
    var selectors = $("select option:selected").map(function(i, value) {
      return ':contains("' + this.value + '")'
    }).get();
    var $selected = $lis.stop().filter(selectors.join()).slideDown();
    $lis.not($selected).slideUp();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple>
  <option value="volvo">volvo</option>
  <option value="saab">saab</option>
  <option value="opel">opel</option>
  <option value="audi">audi</option>
</select>

<div class="result">
  <ul>
    <li>volvo</li>
    <li>volvo coolio</li>
    <li>saab</li>
    <li>opel</li>
    <li>opelino</li>
    <li>opel meier</li>
    <li>audi</li>
  </ul>
</div>

Answer 2

你的代码的问题是你遍历选定的选项然后：

• 显示选定的选项。
• 隐藏其他选项。

考虑到这个登录，当迭代多个选项时，只会显示最后一个。

在下面的示例中，您可以看到您自己的代码已被修改，它首先隐藏所有选项，仅显示选定的选项。

$(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() );
		});
		
		// Hidding all elements.
		$('li').slideUp("slow"); 
		
		//Create a Loop to display li-Elements
		for ( var i = 0, l = arr.length; i < l; i++ ) {
			// Showing selected items.
			$( "li:contains("+ arr[ i ] +")" ).slideDown("slow");
		}
	});
});
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple>
  <option value="volvo">volvo</option>
  <option value="saab">saab</option>
  <option value="opel">opel</option>
  <option value="audi">audi</option>
</select> 

<div class="result">
 <ul>
  <li>volvo</li>
  <li>volvo coolio</li>
  <li>saab</li>
  <li>opel</li>
  <li>opelino</li>
  <li>opel meier</li>
  <li>audi</li>
</ul>
</div> 

https://jsfiddle.net/2z56oom2/4/