Объединить два кода

[Kirukato...]

Помогите пожалуйста объединить два кода в один. Они делают одно и тоже - отбирают нужные блоки. Первый код фильтрует с помощью кнопок, второй выпадающим списком

 <div style="margin:10px 5px 20px 0;">
    <a href="javascript:;" class="filterA activeA" data-filter="all">View all</a>
    <a href="javascript:;" class="filterA" data-filter="o">black</a>
    <a href="javascript:;" class="filterA" data-filter="a">white</a>
    <a href="javascript:;" class="filterA" data-filter="p">green</a>
    </div>
 
    <div class='Luxexe'>
    <select id='Jueyci'>
         <option value='ci'>View all</option>
         <option value="o">black</option>
         <option value="a">white</option>
    </select>
    </div>

  <div class='container'   id='Rupymi'>
    <div class=" a1 ci filter-item o show"> <a data-fancybox='aq' href="http://ipic.su/7z1pOc"><img src='http://ipic.su/7z1pOc'> </a></div>
    <div class=" a1 ci filter-item p show"> <a data-fancybox='aq' href="http://ipic.su/7z1qJw"><img src='http://ipic.su/7z1qJw'> </a></div>
    <div class=" a1 ci filter-item a show"> <a data-fancybox='aq' href="http://ipic.su/7z1qJw"><img src='http://ipic.su/7z1qJw'> </a></div>
</div>

$(document).ready(function() {
  $(".a1").children('a').fancybox({
    loop: false
  });
  $('.filterA').click(function() {
    if( $(this).hasClass('activeA') ) {
      console.log('already activeA');
    }
    else {
      console.log('new activeA');
      $('.filterA').removeClass('activeA');
      $(this).addClass('activeA');<a> Tag bekommt die Klasse "selected" hinzugefьgt
 
      var $dataFilter = $(this).data('filter');
 
      if( $dataFilter == 'all') {
        console.log('add show to all');
        $('.filter-item:not(.show)').fadeIn(500);
        $('.filter-item').addClass('show');
        $('.a1').children('a').attr('data-fancybox', $dataFilter).data("fancybox", $dataFilter);
      }
      else {
        console.log('delete show ' + $dataFilter);
        $('.filter-item:not(.' + $dataFilter + ')').fadeOut(0);
        $('.filter-item:not(.' + $dataFilter + ')').removeClass('show');
        $('.filter-item.' + $dataFilter).fadeIn(500);
        $('.filter-item.' + $dataFilter).addClass('show');
        $('.a1.' + $dataFilter).children('a').attr('data-fancybox', $dataFilter).data("fancybox", $dataFilter);
      }
    };
  });
});
 
 
  $(document).ready(function () {
    var filter_select_el = document.getElementById("Jueyci");
    var items_el = document.getElementById("Rupymi");
    filter_select_el.onchange = function () { console.log(this.value);
    var items = items_el.getElementsByClassName("ci");
    for (var i = 0; i < items.length; i++) {
    if (items[i].classList.contains(this.value)) { items[i].style.display = "block"; }
    else { items[i].style.display = "none"; } } }; });

[Килобайт]

$(document).ready(function() {
  $(".a1").children('a').fancybox({
    loop:false
  });
  $('.filterA').click(function() {
    if ($(this).hasClass('activeA')) {
      console.log('already activeA');
    } else {
      console.log('new activeA');
      $('.filterA').removeClass('activeA');
      $(this).addClass('activeA');

      var $dataFilter = $(this).data('filter');

      if ($dataFilter == 'all') {
        console.log('add show to all');
        $('.filter-item:not(.show)').fadeIn(500);
        $('.filter-item').addClass('show');
        $('.a1').children('a').attr('data-fancybox', $dataFilter).data("fancybox", $dataFilter);
      } else {
        console.log('delete show ' + $dataFilter);
        $('.filter-item:not(.' + $dataFilter + ')').fadeOut(0);
        $('.filter-item:not(.' + $dataFilter + ')').removeClass('show');
        $('.filter-item.' + $dataFilter).fadeIn(500);
        $('.filter-item.' + $dataFilter).addClass('show');
        $('.a1.' + $dataFilter).children('a').attr('data-fancybox', $dataFilter).data("fancybox", $dataFilter);
      }
    };
  });

  var filter_select_el = document.getElementById("Jueyci");
  var items_el = document.getElementById("Rupymi");
  filter_select_el.onchange = function() {
    console.log(this.value);
    var items = items_el.getElementsByClassName("ci");
    for (var i = 0; i < items.length; i++) {
      if (items[i].classList.contains(this.value)) {
        items[i].style.display = "block";
      } else {
        items[i].style.display = "none";
      }
    }
  };
});

Объединил два скрипта в один. Добавил в него обработчик изменения выпадающего списка, который ищет элементы с классом "ci" и скрывает или показывает их в зависимости от выбранного значения. Теперь можно использовать как кнопки, так и выпадающий список для фильтрации элементов с классом "ci".