jQueryでのフィルタリング複数のドロップダウンを使用した「検索」と「フィルタ」

Question

複数のドロップダウンメニューを持つクライアントWebサイトのページに対していくつかのフィルタオプションを作成しようとしています。私はそれを動作させることができますが、オプションを選択すると、常にフィルタリングがリセットされます。私は彼らが "一緒に"働く必要があります。それはホテル内の部屋をフィルタリングするためのものです（たくさんの部屋はありません）。

最初のドロップダウンは部屋に入る人の数、次に借りる部屋のタイプ、そして最後にその部屋/家の寝室の数です。

ユーザーは3つのドロップダウンをすべて使用して結果をフィルタリングできます。または、彼は1つしか使用できません。彼は最初のドロップダウンで「3」を選択できる必要があります。その後、結果ボックスに「3」までのルームのみを表示するためにすべてをフィルタリングします。その後、2番目のドロップダウンで "Studios"を選択した場合、部屋に入る人数に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

それぞれの選択の変更イベントに対して同じロジックを実行することをお勧めします。そのロジックでは、3つのフィルタリングオプションすべてを一度にチェックする必要があります。 タイプとの場合は、"all"という値は、設定したdata-の属性と同じではないため、考慮する必要があります。

//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：ここに述べたものと

修正JavaScriptコードがあります。

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