множественный фильтр выбора окна, чтобы показать скрыть div

Question

Я пытаюсь создать фильтр страницы, чтобы показать скрыть div на основе значений выпадающего списка, для чего на одной странице было два поля выбора, а в некоторых из них было 3 комбинации ящиков и после выбора каждого значения из select box, который должен показывать или скрывать определенный 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(); 

     } 

     }); 
    }); 

Here is fiddle for my code

Answer 1

вы выборка раскрывающегося выбранного значения, но первый вариант в выбери тег не имеют значения атрибута поэтому попробуйте ниже кода

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

Answer 2

Вам просто нужно перебирать каждый DIV с классом row-sort и проверить, доступны ли выбранные опции в качестве классов в этих 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/