Question

我尝试根据所选选项创建一个显示li元素的过滤器。它可以工作，当我只选择一个选项时，元素会在选中时显示，并在取消选择时消失。

但是当选择多个选项时，元素首先出现然后再次消失。我想循环中的某些内容是错误的？

使用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

问题在于每次迭代都要重置过滤器，而不是

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您的代码的问题在于您遍历选定的选项：

显示所选选项。
隐藏其他选项。

记住这个登录信息，当迭代多个选项时，只显示最后一个选项。

在下面的示例中，您可以看到自己的代码以首次隐藏所有选项的方式进行修改，只显示修改后的代码。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

多重选择中的Jquery过滤器<li>

2 个答案: