多个选择框过滤器以显示隐藏div

Question

I am trying to create a page filter to show hide div based upon combine dropdown values, for that some page had two select boxes and some had 3 select boxes combination and after selecting each value from select boxes a particular div should show or hide. I got some luck to reach at point but couldn't get further please help.

$(".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();

        }

      });
     });

Here is fiddle for my code

Answer 1

you are fetching the dropdown selected value but first option in the select tag do not have value attribute so try below code

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

Answer 2

You just need to iterate through each div with class row-sort and check if the selected options are available as classes in those divs. If so, just show them.

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

Working example : https://jsfiddle.net/DinoMyte/p4ow1h7f/5/