Почему не отрабатывает фильтр? JS

Question

Столкнулся с проблемой, нужно сделать фильтр . Сделал его след. образом

<select class="filters">
        <option value="pokemon-item">Все специальности</option>
        <option value="endur-pok">Endurance</option>
        <option value="shadow-pok">Shadow</option>
        <option value="vitality-pok">Vitality</option>
    </select>

И некоторая часть кода по котором должен срабатывать фильтр

<div class="pokemon-items">
   <div class="pokemon-item endur-pok"></div>
   <div class="pokemon-item shadow-pok"></div>
   <div class="pokemon-item speed-pok"></div>
   <div class="pokemon-item vitality-pok"></div>
</div

Написан такой скрипт, по идеи он должен работать, не могу разобраться в чем проблема, 0 реакции на этот скрипт

var filter_select_el = document.getElementsByClassName('filters');
    var items_el = document.getElementsByClassName('pokemon-items')[0];

    filter_select_el.onchange = function() {
        console.log(this.value);
      var items = items_el.getElementsByClassName('pokemon-item');
      for (var i=0; i<items.length; i++) {
        if (items[i].classList.contains(this.value))  {
            items[i].style.display = '';
        } else {
            items[i].style.display = 'none';
        }
      }
    };

Разместил код на https://jsfiddle.net/fpm03xk2/ помогите разобраться пожалуйста В консоле пишет только след. замечание, ни каких ошибок: (Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.)