Isotope - combination filters with 4 selects with reset, disable non available

index.html

<div class="container">
    <div class="row">
        <div class="zone filter clearfix">
            <div class="col-md-2">
                <h3>Color</h3>
                <label>
                    <select data-filter-group="color" class="data-selector">
                        <option class="filter-all" data-filter="" selected> All </option>
                        <option data-filter=".red"> Red <span class="filter-count"></span></option>
                        <option data-filter=".yellow"> Yellow <span class="filter-count"></span></option>
                        <option data-filter=".blue"> Blue <span class="filter-count"></span></option>
                    </select>
                </label>
            </div>
            <div class="col-md-2">
                <h3>Size</h3>
                <label>
                    <select data-filter-group="size" class="data-selector">
                        <option class="filter-all" data-filter="" selected> All </option>
                        <option data-filter=".small"> Small</option>
                        <option data-filter=".big"> Big</option>
                        <option data-filter=".wide"> Wide</option>
                        <option data-filter=".tall"> Tall</option>
                    </select>
                </label>
            </div>
            <div class="col-md-2">
                <h3>Shape</h3>
                <label>
                    <select data-filter-group="shape" class="data-selector">
                        <option class="filter-all" data-filter="" selected> All </option>
                        <option data-filter=".round"> Round</option>
                        <option data-filter=".square"> Square</option>
                    </select>
                </label>
            </div>
            <div class="col-md-2">
                <h3>Brand</h3>
                <label>
                    <select data-filter-group="brand" class="data-selector">
                        <option class="filter-all" data-filter="" selected> All </option>
                        <option data-filter=".nike"> Nike</option>
                        <option data-filter=".adidas"> Adidas</option>
                        <option data-filter=".puma"> Puma</option>
                    </select>
                </label>
            </div>
            <button class="button button--reset">Reset filters</button>
            <p class="filter-count"></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="filtr-container js-ngo-container">
        <div class="ngos filtr-item puma blue round small" data-category="">PUMA</div>
        <div class="ngos filtr-item red square big nike" data-category="">NIKE</div>
        <div class="ngos filtr-item adidas yellow round small" data-category="">ADIDAS</div>
        <div class="ngos filtr-item blue round wide puma" data-category="">PUMA</div>
        <div class="ngos filtr-item red round tall adidas" data-category="">ADIDAS</div>
        <div class="ngos filtr-item yellow round big nike" data-category="">NIKE</div>
        <div class="ngos filtr-item red square small puma" data-category="">PUMA</div>
        <div class="ngos filtr-item adidas blue round small" data-category="">ADIDAS</div>
    </div>
</div>

isotope-combination-filters-with-4-selects-with-reset-disable-non-available.markdown

Isotope - combination filters with 4 selects with reset, disable non available

Isotope - combination filters with 4 selects with reset, disable non available

A Pen by xroses on CodePen.

License.

script.js

var $grid = $('.filtr-container').isotope({
        itemSelector: '.filtr-item'
    });

    // store filter for each group
    var filters = {};

    $('select').change(function () {

        var $this = $(this);
        var filterGroup = $this.attr('data-filter-group');

        $("select option").attr('disabled', 'disabled');
        $(".filter-all").removeAttr('disabled', 'disabled');

        filters[ filterGroup ] = $('option:selected', this).attr('data-filter');
//var filters = $('option:selected', this).attr('data-filter');

        // combine filters
        var filterValue = concatValues( filters );

        // set filter for Isotope
        $grid.isotope({ filter: filterValue });
    });

    $grid.isotope( 'on', 'layoutComplete', function() {

        var elems = $grid.isotope('getFilteredItemElements');
        console.log( elems.length + ' filtered items'  );
// elems = $grid.find('.filtr-item');

        $(elems).each(function() {
            var filterClass = $(this).attr("class");
            var filterClassArray = filterClass.split(' ');
            console.log(filterClassArray);

            jQuery.each( filterClassArray, function( i, val ) {
                $('[data-filter=".'+ val + '"]').removeAttr('disabled', 'disabled');
            });

        });

    });


    // flatten object by concatting values
    function concatValues( obj ) {
        var value = '';
        for ( var prop in obj ) {
            value += obj[ prop ];
        }
        return value;
    }

    $('.button--reset').on( 'click', function() {
        // reset filters
        filters = {};
        $grid.isotope({ filter: '*' });
        // reset selects
        $('.data-selector').val('');
        $('.data-selector option').removeAttr('disabled');    
        $('.data-selector').prop('selectedIndex',0); 
    });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

style.css

.container {
  font-family:sans-serif;
  max-width:1200px;
  margin:0 auto;
}
select {
    border:none;
    padding: 5px;
    border-radius: none;
    background: #FFF;
}
.filter {
  display:block;
  float:none;
  clear:both;
  width:auto;
  height:120px;
  background:#EEE;
  padding:20px 5%;
  margin:20px;
}
.col-md-2 {float:left;width:24%;}
.button--reset {
    float: right;
    clear: both;
    margin:10px 0;
    border:none !important;
    background: #FFF;
    padding:10px;
    font-family: sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    color:#333;
    cursor: pointer;
}
.button--reset:hover {
    background: #333;
    color:#FFF;
}
.filtr-container {
  background:#EEE;
  padding:20px 5%;
  margin:20px;
  }
.ngos, .filtr-item {
  width: 70px;
  height: 70px;
  margin: 5px;
  float: left;
  line-height:70px;
  font-size:12px;
  text-align:center;
  color:#FFF;
}
.ngos.round {border-radius: 35px;}
.ngos.big.round {border-radius: 75px;}
.ngos.red { background: red; }
.ngos.blue { background: blue; }
.ngos.yellow { background: yellow;color:#000 !important;}
.ngos.wide, .ngos.big { width: 150px; }
.ngos.tall, .ngos.big { height: 150px;line-height:150px !important;}