使用jQuery「查找」和「過濾器」進行過濾使用多個下拉列表

Question

我一直在嘗試使用多個下拉菜單爲客戶網站上的頁面進行一些過濾選項。我可以讓它工作，但是當我選擇一個選項時，它總會重置篩選。我需要他們一起工作。它用於過濾酒店中的房間（不是那裏的很多房間）。

因此，第一個下拉列表是適合房間的人數，然後是房間類型，最後是該房間/房間的臥室數量。

用戶可以使用所有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。非常感謝

Answer 1

我會建議爲每個選擇的更改事件執行相同的邏輯，並且在該邏輯中，您應該一次檢查所有三個過濾選項。在類型和臥室的情況下，值"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。

Answer 2

看看這個小提琴 - 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。

Answer 3

這裏是固定的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(); 
    } 
})