Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Isotope Multiple Filter Select

We have built a testing site here ... We need to make it so that the items show all of what is selected, at the moment it only shows the last selected item rather than comparing and hidding what is not needed, hope this makes sense?

User Gravatar


Posted Jun 1 2014 13:59 UTC


  • Assigned To Gaby
  • Solved
  • isotope
    isotope filters

3 Replies

(just updated the cartesionSelector function to handle the Show All option correctly)

You need to combine the selectors when selecting multiple items.

So change the lines that have

var selector = $('option:selected', this).attr('data-filter');


var selector = $('option:selected', this).map(function(){
                   return $(this).attr('data-filter');

If you want to combine the two filters (categories and colors) to get items from the categories that are filtered by color you will need to create the cartesian product of the two filters.

For that you need to change the code of your two filters to this (handles both filters)

function cartesianSelector(filter1,filter2){
    var map = [];

    if (filter2.length == 0 || filter2.indexOf('*')>-1) return filter1;
    if (filter1.length == 0 || filter1.indexOf('*')>-1) return filter2;

    for (var x=0;x<filter1.length;x++){
        for (var y=0;y<filter2.length;y++){
    return map;

var filters = $('#filters-a,#filters-b').change(function(){
              var selectorA = $('option:selected', filters[0]).map(function(){
                       return $(this).attr('data-filter');
                  selectorB = $('option:selected', filters[1]).map(function(){
                       return $(this).attr('data-filter');
                  selector = cartesianSelector(selectorA, selectorB).join();

                   filter: selector,
                   animationOptions: {
                       duration: 750,
                       easing: 'linear',
                       queue: true, 
              return false; 

this way selecting ardenne and colonial categories along with red and grey/black color will show products that are

  • ardenne and red
  • ardenne and grey/black
  • colonial and red
  • colonial and grey/black
User Gravatar


Posted Jun 1 2014 19:26 UTC


This didn't solve your task? Get your own custom solution.

Golden! Thank you

User Gravatar


Posted Jun 2 2014 6:48 UTC

Golden! Thank you

User Gravatar


Posted Jun 2 2014 6:48 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions