Multiple categories filtering with dropdowns

[mariellejl]

Hi,
I'm banging my head against a wall on an issue here, and I just cannot figure it out. I have a page with multiple dropdowns, each connected to multiple categories. What I want it to do is use these multiple dropdowns to filter a list of items. The problem is that when I choose something from the first dropdown and then from the second, the second dropdown overrides whatever I selected with the first. As I understood it from examples, it would be possible to avoid this by using requireAll: true, but I am starting to suspect that I misunderstood the functionality of it.

Is there any way of accomplishing what I want with your plugin?

I should also mention I am quite new to all of this, so I might have overlooked something completely obvious.

My js is as follows:

$(function() {

    var ex8 = $('.filter').instaFilta({

        scope: '#ex8',
        targets: '.instafilta-target',
        requireAll: true

    });
   $('#role').on('change', function() {

        ex8.filterCategory($(this).val()) 

    });

    role.filterCategory('Offense');
    role.filterCategory('Defense');

   $('#element').on('change', function() {

        ex8.filterCategory($(this).val()) 

    });

    element.filterCategory('Physical');
    element.filterCategory('Arcane');
    element.filterCategory('Fire');
    element.filterCategory('Frost');
    element.filterCategory('Lightning');

});

The select:

<div class="example" id="ex8">
<fieldset class="filters">
                        <input type="text" id="ex8f" placeholder="Type here to filter">
                        <select class="filter" id="role" name="role">
                            <option value="">Role</option>
                            <option value="Offense">Offense</option>
                            <option value="Defense">Defense</option>

                        </select>


                        <select class="filter" id="element">
                            <option value="">Element</option>
                            <option value="Physical">Physical</option>
                            <option value="Arcane">Arcane</option>
                            <option value="Fire">Fire</option>
                            <option value="Frost">Frost</option>
                            <option value="Lightning">Lightning</option>
                        </select>

                    </fieldset>

<span class="instafilta-target" data-instafilta-category="<?php echo $role . "," . $element ?>"><?php echo $img ?></span>
</div>

EDIT: With above example, with the filterCategory('') added, filtering doesn't actually work, so I'm back to

$(function() {

    var ex8 = $('.filter').instaFilta({

        scope: '#ex8',
        targets: '.instafilta-target',
        requireAll: true

    });

   $('#role').on('change', function() {     
        ex8.filterCategory($(this).val()) 

    });
   $('#element').on('change', function() {
        ex8.filterCategory($(this).val()) 

    });
});

[chromawoods]

You seem to only be filtering on $(this).val(), which is only one value. You need to scoop up the values of all selects and feed them to filterCategories. Check out the All or nothing example on the demo page. Then, items will match if they have any or all categories depending on the requireAll option.

Hope I understood your problem. Let me know if it works. I just had a brief look at it.