Filter based on combination of multiple select and single select elements

Question

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>

and

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

    });
});

See everything in this 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.

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");

see http://jsfiddle.net/mahish/dum7n/ .

Answer below offers different code which works as well!

Dave Stein · Accepted Answer · 2013-08-31T15:38:29.810

2

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

.class1.class2.class3 means class1 && class2 && class 3

.class1, .class2, .class3 means 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/

edited Aug 31 '13 at 15:38

answered Aug 31 '13 at 01:36

Dave Stein

8,653
13
56
104

Wow, thats pretty neat. Nice learning curve for me.. Although, multiple options still not working. I should change the language sry. – mahish Aug 31 '13 at 01:47
I wasn't adding the multiple select values properly – Dave Stein Aug 31 '13 at 01:54
Actually, the whole filter thing doesnt work at all right now:( Copy html from this fiddle to has letters instead of czech words to see results clearly. http://jsfiddle.net/mahish/Bd8S9/ – mahish Aug 31 '13 at 02:01
Keep your console open and you'll see all the classes that it's supposed to show. Your markup has a lot of em so another challenge for me :) – Dave Stein Aug 31 '13 at 02:05
You just need the `$.each` in the multi value getting.. 14 has it and so does the other – Dave Stein Aug 31 '13 at 02:06
Is the `console.log` for the classes of `show` wrong? I see it populating with everything. Are you sure your markup has the matching classes? – Dave Stein Aug 31 '13 at 02:27
values, labels, classes all are originally PHP generated. Console is right since it shows what you select. The real results are wrong tho. Something must be wrong in between. And even you select an additional `option` from different single dropdown `select` (Didaktické procesy -> Analyzovat i.e.), the results get messed. – mahish Aug 31 '13 at 02:35
Yeah the ABCD didn't help much I'd need the whole thing to be simple english sentences to know. I just keep seeing gibberish come in and out that doesn't correspond to the labels ya know? I only speak French and English ;) – Dave Stein Aug 31 '13 at 02:37
:) I know, i ve changed that just for visual ease:) Going to change the whole thing then! – mahish Aug 31 '13 at 02:40
It looks fine to me... it's supposed to be what you choose in the multi + the one from single dropdown right? – Dave Stein Aug 31 '13 at 03:09
Or did you want one to override the other? – Dave Stein Aug 31 '13 at 03:10
Look at this http://gyazo.com/df19a1adeb695523bbaaf2c4e46bb44d , the result simply doesnt match with selected options. – mahish Aug 31 '13 at 08:21
I want `filter1 && filter2 && filter3`. Now it behaves more like `filter1 || filter2 || filter3` ... – mahish Aug 31 '13 at 08:28
Ohhhh that's a real simple change! – Dave Stein Aug 31 '13 at 15:34
Fixed it buddy. Now it uses `&&` logic rather than `||` – Dave Stein Aug 31 '13 at 15:38
Thank you very much for your effort. You showed me different perspective on my code. I will keep with my original code tho. THe only thing I need to do was to replace commas with dots. – mahish Aug 31 '13 at 15:53
Oh. Didnt notice your recent comment. Gimme link, let me check:) This mine working version btw: http://jsfiddle.net/mahish/dum7n/ . The line changed: `$(filter4Selector + filter5Selector.replace(/,/g, ".")).fadeIn("fast");` – mahish Aug 31 '13 at 15:56
Ok. Thanks! I will edit my original post with mine solution as well. – mahish Aug 31 '13 at 16:22
Just don't forget to remove the `console`s ;) – Dave Stein Aug 31 '13 at 17:28

score 0 · Answer 2 · answered Aug 31 '13 at 01:24

0

Separate the selectors with commas and that should work (google jQuery multiple selectors for more information)

answered Aug 31 '13 at 01:24

Sterling Archer

22,070
18
81
118

You pointed me to the right direction. However, I needed to replace commas with dots – http://stackoverflow.com/questions/1041344/jquery-multiple-class-selector . – mahish Aug 31 '13 at 15:51

Filter based on combination of multiple select and single select elements

2 Answers2

Linked