Jquery 在多选上筛选 <li>
Jquery Filter <li> on Multiselect
我尝试创建一个过滤器,它根据 selected 选项显示 li 元素。它有效,当我 select 只有一个选项时,元素在 selected 时显示,在 deselected 时消失。
但是当select编辑多个选项时,元素先出现然后又消失。我猜循环中有什么地方不对?
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>
问题是在每次迭代中您都在重置过滤器,而您可以这样做
$(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>
您的代码的问题是您遍历了选定的选项然后:
- 显示选择的选项。
- 隐藏其他选项。
记住这个登录名,当遍历多个选项时,只会显示最后一个。
在下面的示例中,您可以看到您自己的代码经过修改,首先隐藏所有选项,仅显示所选选项。
$(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>
我尝试创建一个过滤器,它根据 selected 选项显示 li 元素。它有效,当我 select 只有一个选项时,元素在 selected 时显示,在 deselected 时消失。
但是当select编辑多个选项时,元素先出现然后又消失。我猜循环中有什么地方不对?
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>
问题是在每次迭代中您都在重置过滤器,而您可以这样做
$(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>
您的代码的问题是您遍历了选定的选项然后:
- 显示选择的选项。
- 隐藏其他选项。
记住这个登录名,当遍历多个选项时,只会显示最后一个。
在下面的示例中,您可以看到您自己的代码经过修改,首先隐藏所有选项,仅显示所选选项。
$(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>