基于多个选择元素和单个选择元素的组合进行过滤 [英] Filter based on combination of multiple select and single select elements

问题描述

我想按类过滤(显示/隐藏)元素.我想说5个过滤器一起工作.

I want to filter (show/hide) elements by class. I want to have lets say 5 filters working together.

<select id='filter4'>...</select>
<select id='filter5'>...</select>
<select id='filter6'>...</select>
<select id='filter7'>...</select>

和

<select id='filter6' multiple>...</select>

jquery:

jQuery(document).ready(function ($) {
    $("select").on("change", function () {
        var filterVal = $("select#filter4").val();
        var filterVal2 = $("select#filter5").val();
        var filterVal3 = $("select#filter6").val();
        var filterVal4 = $("select#filter7").val();
        var filterVal5 = $("select#filter8").val();
        var filterSelector = "";
        var filter2Selector = "";
        var filter3Selector = "";
        var filter4Selector = "";
        var filter5Selector = "";

        if (filterVal == "all" && filterVal2 == "all" && filterVal3 == "all" && filterVal4 == "all" && filterVal5 === null) {
            //show all items 
            $(".item").fadeIn("fast");
        } else {
            if (filterVal != "all") {
                filterSelector = "." + filterVal;
            }

            if (filterVal2 != "all") {
                filter2Selector = "." + filterVal2;
            }

            if (filterVal3 != "all") {
                filter3Selector = "." + filterVal3;
            }

            if (filterVal4 != "all") {
                filter4Selector = "." + filterVal4;
            }

            if (filterVal5 !== null) {
                filter5Selector = "." + filterVal5;
            }

            $(".item").hide();
            $(filterSelector + filter2Selector + filter3Selector + filter4Selector + filter5Selector).fadeIn("fast");
        }

    });
});

请参见此jsfiddle中的所有内容！

前四个单个过滤器可以解决任何问题.选择多个选项时，第五个多选元素无法正常工作(过滤).

The first four single filters work with any problem. The fifth multi-select element does not work (filter) properly when more than one option is selected.

编辑:需要在全局匹配项g修饰符(//g)的帮助下，用点(多个css选择器)替换逗号.

EDIT: It was needed to replace commas with dots (multiple css selectors) with help of g modifier (/ /g) which is global match:

$(filter4Selector + filter5Selector.replace(/,/g, ".")).fadeIn("fast");

请参见 http://jsfiddle.net/mahish/dum7n/.

下面的答案提供了同样有效的不同代码！

Answer below offers different code which works as well!

推荐答案

清理代码并修复多个查询.请注意:

Cleaned up your code and fixed the multiple queries. Note that:

.class1.class2.class3表示class1 && class2 && class 3

.class1, .class2, .class3表示class1 || class2 || class 3

这是引起评论中更早混乱的原因.

That was cause of earlier confusion in the comments.

jQuery(document).ready(function ($) {

    var values = [7, 8];

    $("select").on("change", function () {

        var showAll = true,
            show = [],
            joined;

        $.each(values, function (index, id) {
            var $el = $('#filter' + id),
                multi = $el.attr('multiple'),
                val = $el.val();

            if (multi) {
                if (val !== null) {
                    showAll = false;
                    $.each(val, function (i, v) {
                        show.push( v );
                    });
                }
            } else {
                if (val != 'all') {
                    showAll = false;
                    show.push( val );
                }
            }


        });

        console.log(showAll);
        console.log(show);

        if (showAll) {
            //show all items 
            $(".item").fadeIn("fast");
        } else {

            joined = '.' + show.join('.');

            console.log( joined );

            $(".item").hide();
            $( joined ).fadeIn("fast");
        }

    });

    $.each(values, function (index, id) {
        $('#filter' + id).chosen();
    });


});

http://jsfiddle.net/9SZkr/1/

这篇关于基于多个选择元素和单个选择元素的组合进行过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！