多个选择框过滤器以显示隐藏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/