使用jQuery“查找”和“过滤器”进行过滤使用多个下拉列表
问题描述：
我一直在尝试使用多个下拉菜单为客户网站上的页面进行一些过滤选项。我可以让它工作，但是当我选择一个选项时，它总会重置筛选。我需要他们一起工作。它用于过滤酒店中的房间（不是那里的很多房间）。使用jQuery“查找”和“过滤器”进行过滤使用多个下拉列表
因此，第一个下拉列表是适合房间的人数，然后是房间类型，最后是该房间/房间的卧室数量。
用户可以使用所有3个下拉列表来筛选他的结果，或者他只能使用1.无论他喜欢什么。他必须能够在第一个下拉列表中选择“3”，然后过滤所有内容以仅显示结果框中最多为“3”的房间。之后，如果他在第二个下拉列表中选择“工作室”，则需要记住他已经为适合房间的人数选择了“3”，但是请记住，他现在刚刚选择了“工作室” ，所以它应该显示可以有多达3人的工作室。等等。
我想你明白了。 这里是我的HTML代码：
<select class="bedroom-min">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select class="type">
<option value="all">Select...</option>
<option value="casitas">Casitas</option>
<option value="studios">Studios</option>
<option value="dorm">Dorm</option>
</select>
<select class="bedrooms">
<option value="all">Select...</option>
<option value="1">1 bedroom</option>
<option value="2">2 bedrooms</option>
</select>
<div class="property-load-section">
<div class="property-item" data-bedrooms="5" data-type="casitas" data-bed="1">Room #529</div>
<div class="property-item" data-bedrooms="4" data-type="studios" data-bed="2">Room #737</div>
<div class="property-item" data-bedrooms="3" data-type="dorm" data-bed="2">Room #123</div>
<div class="property-item" data-bedrooms="2" data-type="studios" data-bed="2">Room #126</div>
<div class="property-item" data-bedrooms="1" data-type="casitas" data-bed="1">Room #523</div>
</div>
而这里的jQuery代码：
//Filtering for number of person that can sleep in that room
$("select").change(function() {
var minValue = $('select.bedroom-min').val();
$('.property-load-section').find('.property-item').filter(function() {
return $(this).attr('data-bedrooms') < minValue;
}).fadeOut('fast');
$('.property-load-section').find('.property-item').filter(function() {
return $(this).attr('data-bedrooms') >= minValue;
}).fadeIn('fast');
});
//Filtering for type of rooms
$("select.type").change(function() {
var roomType = $('select.type').val();
$('.property-load-section').find('.property-item').filter(function() {
return $(this).attr('data-type') != roomType;
}).fadeOut('fast');
});
//Filtering for the number of bedrooms
$("select.bedrooms").change(function() {
var roomBed = $('select.bedrooms').val();
$('.property-load-section').find('.property-item').filter(function() {
return $(this).attr('data-bed') != roomBed;
}).fadeOut('fast');
});
这里有一个CodePen链接：https://codepen.io/anon/pen/bRxXVK?editors=1010
谁能帮我这个？我很新的JavaScript/jQuery。非常感谢
答
我会建议为每个选择的更改事件执行相同的逻辑，并且在该逻辑中，您应该一次检查所有三个过滤选项。在类型和卧室的情况下，值"all"也应该被考虑，因为它是一个特殊值，它不会等于您设置的data-属性。
随着这里说的是修改后的JavaScript代码：
//call the same function for each select's change event
$("select.bedroom-min, select.type, select.bedrooms").change(updateRooms);
function updateRooms() {
//get all the values
var minValue = $('select.bedroom-min').val();
var roomType = $('select.type').val();
var roomBed = $('select.bedrooms').val();
$('.property-load-section')
.find('.property-item')
.hide()
.filter(function() {
var okMinBedrooms = $(this).attr('data-bedrooms') >= minValue;
var okRoomType = true;
if(roomType !== "all"){
okRoomType = $(this).attr('data-type') === roomType;
}
var okRoomBed = true;
if(roomBed !== "all"){
okRoomBed = $(this).attr('data-bed') === roomBed;
}
//only fade a room if it satisfies all three conditions
return okMinBedrooms && okRoomType && okRoomBed;
}).fadeIn('fast');
}
并有CodePen link。
答
看看这个小提琴 - https://jsfiddle.net/pjz958n6/。
$("select").change(function() {
var minValue = $('select.bedroom-min').val();
var roomType = $('select.type').val();
var roomBed = $('select.bedrooms').val();
$('.property-load-section').find('.property-item').filter(function() {
return $(this).attr('data-bedrooms') < minValue
|| ($(this).attr('data-type') != roomType || roomType == "all")
|| ($(this).attr('data-bed') != roomBed || roomBed == "all");
}).fadeOut('fast');
$('.property-load-section').find('.property-item').filter(function() {
return $(this).attr('data-bedrooms') >= minValue
&& ($(this).attr('data-type') == roomType || roomType == "all")
&& ($(this).attr('data-bed') == roomBed || roomBed == "all");
}).fadeIn('fast');
});
所有你需要做的就是评估所有select关于任何变化的选项。与fade-out类似，只需要执行||与&&相反的fade-in。
答
这里是固定的JavaScript代码或JsFiddle：
$(document).ready(function(){
// Once document is ready
// Reference to dropdowns
var ddlRooms = $('select.bedroom-min');
var ddlType = $('select.type');
var ddlBedRooms = $('select.bedrooms');
// Hook up event handler for change event
ddlRooms.change(doFilter);
ddlType.change(doFilter);
ddlBedRooms.change(doFilter);
// Start with initial filtering
doFilter();
function doFilter(){
// Start with hiding all property item
$('.property-load-section > .property-item').hide();
// Get the selected values
var selectedRooms = parseInt(ddlRooms.val());
var selectedType = ddlType.val();
var selectedBedRooms = ddlBedRooms.val();
// Get items matching rooms
var matched = $('.property-load-section').find('.property-item').filter(function() {
// Current property item
var curPropertyItem = $(this)
var curPropertyRooms = parseInt(curPropertyItem.attr('data-bedrooms'))
var curPropertyType = curPropertyItem.attr('data-type');
var curPropertyBeds = curPropertyItem.attr('data-bed');
//console.log('Rooms matched: ' + roomMatched());
//console.log('Type matched: ' + roomTypMatched());
//console.log('Beds matched: ' + bedsMatched())
return (roomMatched() && roomTypMatched() && bedsMatched());
function roomMatched(){
return curPropertyRooms >= selectedRooms;
}
function roomTypMatched(){
if (selectedType === 'all'){
return true;
}
else if(curPropertyType === selectedType){
return true;
}
else{
return false;
}
}
function bedsMatched(){
if(selectedBedRooms === 'all'){
return true;
}
else if (curPropertyBeds === selectedBedRooms){
return true;
}
else{
return false;
}
}
});
// Show matched property
//console.log('Matched items: ' + matched.length);
matched.show();
}
})
真棒，谢谢你解释什么，我需要在这里做。现在一切都更清楚了。完美运作。 – larin555