同位素多重过滤器1然后过滤2

Question

我无法将同位素脚本设置为多重过滤器...用户会选择位置（例如：格鲁吉亚所有项目都将被过滤）然后用户选择类型（例如：所有选定的格鲁吉亚内容将按类型过滤）。第一个过滤器正在工作，但是当选择类型时，它不仅显示所选的生活类型。它只是洗牌。

过滤以排序

  <select class="filters-select">
    <option value="*">Location</option>
    <option value="*">Any</option>
    <option value=".georgia">Georgia</option>
    <option value=".maryland">Maryland</option>
    <option value=".ncarolina">North Carolina</option>
    <option value=".pennsylvania">Pennsylvania</option>
    <option value=".virginia">Virginia</option>
  </select>
  <select class="filters-select2">
    <option value="*">Type</option>
    <option value=".apartments">Apartments</option>
    <option value=".mixeduse">Mixed Use</option>
    <option value=".student-housing">Student Housing</option>
    <option value=".senior-living">Senior Living</option>
  </select>

要排序的内容

<div class="two-third portfolio-item georgia apartments" data-category="apartments">
    <h5 class="property-name"><span>apartments</span></h5>
  <p class="property-city">DECATUR, GEORGIA</p>
</div>            

<div class="one-third portfolio-item georgia apartments" data-category="apartments">
    <h5 class="property-name"><span>apartments</span></h5>
  <p class="property-city">LAWRENCEVILLE, GEORGIA</p>
</div>            

<div class="two-third portfolio-item pennsylvania student-housing" data-category="student-housing">
  <h5 class="property-name">student-housing</h5>
<p class="property-city">SHIPPENSBURG, PENNSYLVANIA</p>
</div>

<div class="one-third portfolio-item georgia student-housing" data-category="student-housing">
    <h5 class="property-name"><span>student-housing</span></h5>
  <p class="property-city">ATLANTA, GEORGIA</p>
</div>

<div class="two-third portfolio-item georgia student-housing" data-category="student-housing">
    <h5 class="property-name">student-housing</h5>
  <p class="property-city">KENNESAW, GEORGIA</p>
</div>            

<div class="one-third portfolio-item ncarolina mixeduse" data-category="mixeduse">
    <h5 class="property-name">mixeduse</h5>
  <p class="property-city">RALEIGH, NORTH CAROLINA</p>
</div>

<div class="two-third portfolio-item maryland mixeduse" data-category="mixeduse">
    <h5 class="property-name"><span>mixeduse</span></h5>
<p class="property-city">GAITHERSBURG, MARYLAND</p>
</div>

<div class="one-third portfolio-item ncarolina mixeduse" data-category="mixeduse">
    <h5 class="property-name">mixeduse</h5>
  <p class="property-city">CHARLOTTE, NORTH CAROLINA</p>
</div>

<div class="two-third portfolio-item georgia mixeduse" data-category="mixeduse">
    <h5 class="property-name"><span>mixeduse</span></h5>
  <p class="property-city">ATLANTA, GEORGIA</p>
</div>

同位素脚本

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.portfolio-item',
  layoutMode: 'packery'
});
// filter functions
var filterFns = {
  // show if number is greater than 50
  numberGreaterThan50: function() {
    var number = $(this).find('.number').text();
    return parseInt( number, 10 ) > 50;
  },
  // show if name ends with -ium
  ium: function() {
    var name = $(this).find('.name').text();
    return name.match( /ium$/ );
  }
};
// bind filter on select change
$('.filters-select').on( 'change', function() {
  // get filter value from option value
  var filterValue = this.value;
  // use filterFn if matches value
  filterValue = filterFns[ filterValue ] || filterValue;
  $grid.isotope({ filter: filterValue });
});

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