Как реализовать фильтр jquery на select?

Question

[zhen_safronov]

Как реализовать данный фильтр через выбор select,

<p>
<button class="f-red">Фильтр красных элементов</button>
<button class="f-blue">Фильтр синих элементов</button>
<button class="f-green">Фильтр зеленых элементов</button>
<button class="f-all">Все элементы</button>
</p>
 
<div class="red">Первый</div>
<div class="red">Второй</div>
<div class="blue">Третий</div>
<div class="green">Четвертый</div>
<div class="red">Пятый</div>
<div class="blue">Шестой</div>
<div class="blue">Седьмой</div>
<div class="green">Восьмой</div>

var fActive = '';
 
function filterColor(color){
 if(fActive != color){
 $('div').filter('.'+color).slideDown();
 $('div').filter(':not(.'+color+')').slideUp();
 fActive = color;
 }
}
 
$('.f-red').click(function(){ filterColor('red'); });
$('.f-blue').click(function(){ filterColor('blue'); });
$('.f-green').click(function(){ filterColor('green'); });
 
$('.f-all').click(function(){
 $('div').slideDown();
 fActive = 'all';
});

https://jsfiddle.net/5f3ubr0n/

Answer 1

[0xD34F]

Фильтруемым элементам добавить обёртку <div class="items"></div>.

Значениями option'ов пусть будут селекторы элементов, которые должны оказаться видимыми:

<select>
  <option value="*">Все</option>
  <option value=".red">Красные</option>
  <option value=".blue">Синие</option>
  <option value=".green">Зеленые</option>
</select>

Фильтрация:

$('select').change(function() {
  const selector = this.value;
  const $items = $('.items >');
  $items.filter(selector).slideDown();
  $items.not(selector).slideUp();
});