jquery filter chained select options

Question

I'm trying to have multiple filters for a gallery: 1. date published 2. number of items seen in the page 3. type of element

However, one filter is changed the other filters don't stay with the option already selected.

this is my attempt: https://jsfiddle.net/sandiie/fon8e0o6/

$('.date').change(function() {
  var value = $(this).val();
  $('.myAlbu').show();
  if (value == 'jan') {
    $('.jan').fadeIn();
    $('.feb').hide();
  } else if (value == 'feb') {
    $('.feb').fadeIn();
    $('.jan').hide();
  }
})

$('.numberShow').change(function() {
  var val = $(this).val(),
    $item = $('.item');

  if (val == 1) {
    $item.eq(4).nextAll().hide();
  } else if (val == 2) {
    $item.eq(9).nextAll().hide();
  } else if (val == 3) {
    $item.show();
  }
}).trigger('change');

$('.type').change(function() {
  var value = $(this).val();
  $('.myAlbu').show();
  if (value == 'photos') {
    $('.sPix').fadeIn();
    $('.sVids').hide();
  } else if (value == 'videos') {
    $('.sVids').fadeIn();
    $('.sPix').hide();
  } else if (value == 'phovid') {
    $('.sVids').fadeIn();
    $('.sPix').fadeIn();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="date">
  <option disabled>Publish Date</option>
  <option value="jan">Jan</option>
  <option value="feb">Feb</option>
</select>

<select class="numberShow">
  <option value="1">5 items per page</option>
  <option value="2">10 items per page</option>
  <option value="3">View All</option>
</select>

<select class="type">
  <option value="photos" />Photos
  <br />
  <option value="videos" />Videos
  <br />
  <option value="phovid" />all
  <br />
</select>

<div class="item sPix jan">jan photo1 item1</div>
<div class="item sVids jan">jan vid1 item12</div>
<div class="item sPix jan">jan photo2 item13</div>
<div class="item sVids jan">jan vid2 item14</div>
<div class="item sVids jan">jan vid3 item15</div>
<div class="item sPix jan">jan photo3 item16</div>
<div class="item sVids jan">jan vid4 item17</div>
<div class="item sPix jan">jan photo4 item18</div>
<div class="item sVids jan">jan vid5 item19</div>
<div class="item sPix jan">jan photo5 item110</div>
<div class="item sVids feb">feb vid6 item111</div>
<div class="item sPix feb">feb photo6 item112</div>
<div class="item sPix feb">feb photo7 item113</div>
<div class="item sPix feb">feb photo8 item114</div>
<div class="item sPix feb">feb photo9 item115</div>
<div class="item sPix feb">feb photo10 item116</div>
<div class="item sVids feb">feb vid7 item117</div>
<div class="item sVids feb">feb vid8 item118</div>
<div class="item sVids feb">feb vid9 item119</div>
<div class="item sVids feb">feb vid10 item120</div>

help please, thanx

Answer 1

The reason why "they aren't staying", is because you are showing them again via .fadeIn() when something else changes. Your "only show x records" logic also has some serious issues.

Here is one way to overcome these problems, and use css 3 to do the heavy lifting rather than jQuery.

$('.date,.numberShow,.type').change(function() {
  $('#container')
    .removeClass()
    .addClass($('.date option:selected').val())
    .addClass($('.numberShow option:selected').val())
    .addClass($('.type option:selected').val())
});

#container { overflow:hidden;}
#container .item {transition: all 1s; opacity:1;position:relative;}
#container.jan .item:not(.jan), 
#container.feb .item:not(.feb),
#container.photos .item:not(.sPix),
#container.videos .item:not(.sVids) {opacity:0;position:absolute; transition:none;}
#container.v5 {max-height:90px;}
#container.v10 {max-height:180px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="date">
  <option disabled>Publish Date</option>
  <option value="jan">Jan</option>
  <option value="feb">Feb</option>
</select>

<select class="numberShow">
  <option value="v5">5 items per page</option>
  <option value="v10">10 items per page</option>
  <option value="vall">View All</option>
</select>

<select class="type">
  <option value="photos" />Photos
  <option value="videos" />Videos
  <option value="phovid" />all
</select>
<div id="container" class="jan v5 photos">
  <div class="item sPix jan">jan photo1 item1</div>
  <div class="item sVids jan">jan vid1 item12</div>
  <div class="item sPix jan">jan photo2 item13</div>
  <div class="item sVids jan">jan vid2 item14</div>
  <div class="item sVids jan">jan vid3 item15</div>
  <div class="item sPix jan">jan photo3 item16</div>
  <div class="item sVids jan">jan vid4 item17</div>
  <div class="item sPix jan">jan photo4 item18</div>
  <div class="item sVids jan">jan vid5 item19</div>
  <div class="item sPix jan">jan photo5 item110</div>
  <div class="item sVids feb">feb vid6 item111</div>
  <div class="item sPix feb">feb photo6 item112</div>
  <div class="item sPix feb">feb photo7 item113</div>
  <div class="item sPix feb">feb photo8 item114</div>
  <div class="item sPix feb">feb photo9 item115</div>
  <div class="item sPix feb">feb photo10 item116</div>
  <div class="item sVids feb">feb vid7 item117</div>
  <div class="item sVids feb">feb vid8 item118</div>
  <div class="item sVids feb">feb vid9 item119</div>
  <div class="item sVids feb">feb vid10 item120</div>
</div>