В фильтре объединить кнопки и списки

[lev90]

Добрый день!

Есть фильтр на основе Isotope. В нем мне необходимо добавить выпадающий список со значениями. По отдельности, все отлично работает, а объединить все вместе не получается.

Исходный скрипт фильтра:

// External js: jquery, isotope.pkgd.js, bootstrap.min.js, bootstrap-slider.js
$(document).ready( function() {

  var buttonFilters = {};
  var buttonFilter = '*';
  var rangeFilters = {
      'height': {'min':150, 'max': 185},
      'weight': {'min':50, 'max': 90}
    };

  // Initialise Isotope
  var $grid = $('.grid').isotope({
    itemSelector: '.item',
    layout: 'masonry',
    filter: function() {
      var $this = $(this);
      var height = $this.attr('data-height');
      var weight = $this.attr('data-weight');
      var isInHeightRange = (rangeFilters['height'].min <= height && rangeFilters['height'].max >= height);
      var isInWeightRange = (rangeFilters['weight'].min <= weight && rangeFilters['weight'].max >= weight);
      return $this.is( buttonFilter ) && (isInHeightRange && isInWeightRange);
    }
  });

  // Initialise Sliders
  var $heightSlider = $('#filter-height').slider({ tooltip_split: true, min: 130,  max: 220, range: true, value: [150, 180] });
  var $weightSlider = $('#filter-weight').slider({ tooltip_split: true, min: 40,  max: 150, range: true, value: [50, 90] });

  function updateRangeSlider(slider, slideEvt) {
    console.log('Current slider:' + slider);
    var sldmin = +slideEvt.value[0],
        sldmax = +slideEvt.value[1],
        filterGroup = slider.attr('data-filter-group'),
        currentSelection = sldmin + ' - ' + sldmax;

      slider.siblings('.filter-label').find('.filter-selection').text(currentSelection);

      console.log('Filtergroup: '+ filterGroup);
      rangeFilters[filterGroup] = {
        min: sldmin || 0,
        max: sldmax || 100000
      };
      $grid.isotope();
  }

  $heightSlider.on('slideStop', function(slideEvt){
    var $this =$(this);
    updateRangeSlider($this, slideEvt);
  });
  $weightSlider.on('slideStop', function(slideEvt){
    var $this =$(this);
    updateRangeSlider($this, slideEvt);
  });

  $('.filters').on( 'click', '.btn', function() {
    var $this = $(this);
    var $buttonGroup = $this.parents('.btn-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    buttonFilters[ filterGroup ] = $this.attr('data-filter');
    buttonFilter = concatValues( buttonFilters ) || '*';
    console.log( buttonFilter )
    $grid.isotope();
  });

  $('.btn-group').each( function( i, buttonGroup ) {
      var $buttonGroup = $( buttonGroup );
      $buttonGroup.on( 'click', '.btn-filter', function() {
          $buttonGroup.find('.is-checked').removeClass('is-checked');
          $(this).addClass('is-checked');
      });
  });
});

function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}

Скрипт который необходимо добавить

var buttonFilters = {};

$('.filters').on( 'change', function( event ) {
  var $select = $( event.target );
  // get group key
  var filterGroup = $select.attr('data-filter-group');
  // set filter for group
  buttonFilters[ filterGroup ] = event.target.value;
  // combine filters
  var filterValue = concatValues( buttonFilters );
  // set filter for Isotope
  $grid.isotope({ filter: filterValue });

Исходный HTML

<div class="filters filter-section">
        <div class="row">
            <div class="col-sm-4">
                <span class="filter-label">Color:</span>
                <div class="btn-group" role="group" data-filter-group="color">
                    <span class="btn btn-sm btn-default btn-filter is-checked" data-filter="">Any</span>
                    <span class="btn btn-sm btn-default btn-filter" data-filter=".red">Red</span>
                    <span class="btn btn-sm btn-default btn-filter" data-filter=".blue">Blue</span>
                    <span class="btn btn-sm btn-default btn-filter" data-filter=".yellow">Yellow</span>
                </div>
            </div>
            <div class="col-sm-4">
                <span class="filter-label">Size:</span>
                <div class="btn-group" role="group" data-filter-group="size">
                    <span class="btn btn-sm btn-default btn-filter is-checked" data-filter="">Any</span>
                    <span class="btn btn-sm btn-default btn-filter" data-filter=".small">Small</span>
                    <span class="btn btn-sm btn-default btn-filter" data-filter=".wide">Wide</span>
                    <span class="btn btn-sm btn-default btn-filter" data-filter=".big">Big</span>
                    <span class="btn btn-sm btn-default btn-filter" data-filter=".tall">Tall</span>
                </div>
            </div>
            <div class="col-sm-4">
                <span class="filter-label">Shape:</span>
                <div class="btn-group" role="group" data-filter-group="shape">
                    <span class="btn btn-sm btn-default btn-filter is-checked" data-filter="">Any</span>
                    <span class="btn btn-sm btn-default btn-filter" data-filter=".round">Round</span>
                    <span class="btn btn-sm btn-default btn-filter" data-filter=".square">Square</span>
                </div>
            </div>

        <div class="sliders row">
            <div class="col-sm-4">
                <div class="bootstrap-slider">
                    <span class="filter-label">Weight Range: <span class="filter-selection"></span></span>
                    <b class="filter-min">40</b> <input id="filter-weight" type="text" class="bootstrap-slider" value="" data-filter-group="weight"> <b class="filter-max">150</b>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="bootstrap-slider">
                    <span class="filter-label">Height Range: <span class="filter-selection"></span> </span>
                    <b>140</b><input id="filter-height" type="text" class="bootstrap-slider" value="" data-slider-step="1" data-filter-group="height"> <b>220</b>
                </div>
            </div>
        </div>

        <div class="grid">
            <div class="item small round red " data-height="180" data-weight="75"><span class="content">Height:180<br>Weight: 75</span></div>
            <div class="item small round blue" data-height="179" data-weight="73"><span class="content">Height:179<br>Weight: 73</span></div>
            <div class="item small round yellow" data-height="162" data-weight="53"><span class="content">Height:162<br>Weight: 53</span></div>
        </div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/bootstrap-slider.js'></script>

Добавляемый список

<div class="col-sm-4">
 <span class="filter-label">ColorMY:</span>
 <select class="btn-group" data-filter-group="colormy">
  <option value="">any</option>
  <option value=".red">red</option>
  <option value=".blue">blue</option>
  <option value=".yellow">yellow</option>
 </select>
</div>

Понимаю, что изменить необходимо нижеприводимый код, но как не знаю.

$('.filters').on( 'click', '.btn', function() {
    var $this = $(this);
    var $buttonGroup = $this.parents('.btn-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    buttonFilters[ filterGroup ] = $this.attr('data-filter');
    buttonFilter = concatValues( buttonFilters ) || '*';
    console.log( buttonFilter )
    $grid.isotope();
  });

Кто знает, подскажите пожалуйста. В интернете ничего похожего не нашел.
Заранее спасибо.

[рони]

lev90,
строка 64

$('select.btn-group').change(function() {
        buttonFilters[ this.dataset.filterGroup ] = this.value;
        buttonFilter = concatValues( buttonFilters ) || '*';
        console.log( buttonFilter )
        $grid.isotope()
   })