多個選擇框過濾器以顯示隱藏div

Question

我正在嘗試創建一個頁面過濾器，以基於合並下拉列表值顯示hide div，因為該頁面具有兩個選擇框，而某些頁面具有3個選擇框組合，並且在從選擇框中選擇每個值之后，一個特定的div應該顯示或隱藏。 我有一點運氣可以到達，但是不能進一步請幫助。

$(".submit-button-filter").click(function () {
      $(function(){

        var places = $("#places").val();
        var zones = $("#zones").val();
        var stories = $("#stories").val();
        var year = $("#year").val();
        var month = $("#month").val();
        var filters= [places, zones, stories, year, month];
        console.log(filters);

        if(year == 'Year' && month == 'Month'){
           alert("Select Filer value");
        }
        else if(year == 'Year' || month == 'Month'){
           alert("Select combine Filer value");
        }
        else{
          $('.row-sort').hide();

        }

      });
     });

這是我的代碼的小提琴

Answer 1

您正在獲取下拉選擇的值，但是select標記中的第一個選項沒有value屬性，因此請嘗試以下代碼

var year = $("#year :selected").text();
var month = $("#month :selected").text();

Answer 2

您只需要使用類row-sort遍歷每個div，並檢查所選選項是否可作為這些div中的類使用。 如果是這樣，請向他們展示。

$(".submit-button-filter").click(function () {
      $('.row-sort').hide(); // hide all divs

        var year = $("#year").val();
        var month = $("#month").val();
        var filters= [year, month];

        if(year == 'Year' && month == 'Month'){
           alert("Select Filer value");
        }
        else if(year == 'Year' || month == 'Month'){
           alert("Select combine Filer value");
        }
        else
        {
          $('.row-sort').each(function()
          {
             if($(this).hasClasses(filters))
                $(this).show();
          });        
        }
     });

// user defined function to check for multiple classes using hasClass
$.fn.extend({
         hasClasses: function (selectors) {
        var self = this;
        for (var i in selectors) {
            if ($(self).hasClass(selectors[i])) 
                return true;
        }
        return false;
    }
});

工作示例： https : //jsfiddle.net/DinoMyte/p4ow1h7f/5/