jQuery isotope filter issue when used with form select

Question

I am trying to use jquery isotope filtering, to on-page filter HTML blocks, containing 2 parameters each: class-1 class-2

When I am using buttons to filter by class-1, it works. But when i additionally add class-2 in HTML blocks & try to filter by another dropdown select, it doesnt work. M stuck, wondering where m making error ?

HTML

<div id="filters" class="button-group">
<div class="col-md-6"> 
 <ul>
<li><button class="button is-checked" data-filter="*">All</button></li>
<li><button class="button" data-filter=".1">One only</button></li>
</ul>
</div><!--------col-md-6 ends here-------------------->

</div><!-------/#filter ends here---------->

JS

$( document ).ready( function() {
  // init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.class-1',
layoutMode: 'fitRows',
getSortData: {
  name: '.name',
  symbol: '.symbol',
  number: '.number parseInt',
  category: '[data-category]',
  weight: function( itemElem ) {
    var weight = $( itemElem ).find('.weight').text();
    return parseFloat( weight.replace( /[\(\)]/g, '') );
  }
}
  });


  // bind filter button click
  $('#filters').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$container.isotope({ filter: filterValue });
  });

 // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
  $buttonGroup.find('.is-checked').removeClass('is-checked');
  $( this ).addClass('is-checked');
    });
  });

});

Up to here, it works fine in Filtering via button click. But now, I also want to filter same HTML blocks, by using a <select></select>, dropdown. i.e OR condition is implemented in item selector. N now additional code for <select> is :

HTML

<div id="filters" class="select-group">
<div class="col-sm-8">
  <select class="form-control filter_by_type2 select" id="filter_2" placeholder="">
 <option value="2" data-filter=".2">Two only</option>
</select>
</div>
</div>

JS

$( document ).ready( function() {
  // init Isotope
  var $container = $('.isotope').isotope({
itemSelector: '.class-1' || '.class-2',
layoutMode: 'fitRows',
getSortData: {
  name: '.name',
  symbol: '.symbol',
  number: '.number parseInt',
  category: '[data-category]',
  weight: function( itemElem ) {
    var weight = $( itemElem ).find('.weight').text();
    return parseFloat( weight.replace( /[\(\)]/g, '') );
  }
}
  });


  // bind filter button click
  $('#filters').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$container.isotope({ filter: filterValue });
  });

  // bind select option value
  $('#filters').on( 'change', 'select', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$container.isotope({ filter: filterValue });
      });

  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
  $buttonGroup.find('.is-checked').removeClass('is-checked');
  $( this ).addClass('is-checked');
   });
  });

});

Answer 1

A little change in the html and change your filter code to get the option value since you had no data-filter attribute in the select option. A jsfiddle would help since I can't see the actual code working.

HTML

<div class="select-group">
<div class="col-sm-8">
<select id="filters" class="form-control filter_by_type2 select" id="filter_2" placeholder="">
 <option value=".2">Two only</option>
</select>
</div>
</div>

JS

 // bind select option value
 $('#filters').on( 'change', function() {
 var filterValue = $( this ).val();
 // use filterFn if matches value
 filterValue = filterFns[ filterValue ] || filterValue;
 $container.isotope({ filter: filterValue });
  });