Question

我正在尝试创建一个页面过滤器，根据组合下拉值显示隐藏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();

        }

      });
     });

Here is fiddle for my code

Answer 1

您正在获取下拉列表选定值但是select标记中的第一个选项没有值属性，请尝试下面的代码

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/

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

2 个答案: