プルダウンでコンテンツを絞り込みたい

前提・実現したいこと

プルダウンで選択した要素で絞り込んで表示させたいです。
プルダウン仕様では無い、絞り込みのサンプルコードをカスタマイズしてプルダウンで使用できるようにしたいです。

該当のソースコード

【html】
<header>
  <h2>Sequential filtering component with CSS & jQuery</h2>
</header>

<div class="cta filter">
  <a class="all active" data-filter="all" href="#" role="button">Show All</a>
  <a class="green" data-filter="green" href="#" role="button">Show Green Boxes</a>
  <a class="blue" data-filter="blue" href="#" role="button">Show Blue Boxes</a>
  <a class="red" data-filter="red" href="#" role="button">Show Red Boxes</a>
</div>

<div class="boxes">
  <a class="red" data-category="red" href="#">Box1</a>
  <a class="green" data-category="green" href="#">Box2</a>
  <a class="blue" data-category="blue" href="#">Box3</a>
  <a class="green" data-category="green" href="#">Box4</a>
  <a class="red" data-category="red" href="#">Box5</a>
  <a class="green" data-category="green" href="#">Box6</a>
  <a class="blue" data-category="blue" href="#">Box7</a>
  <a class="red" data-category="red" href="#">Box8</a>
  <a class="green" data-category="green" href="#">Box9</a>
  <a class="blue" data-category="blue" href="#">Box10</a>
  <a class="red" data-category="red" href="#">Box11</a>
  <a class="green" data-category="green" href="#">Box12</a>
  <a class="blue" data-category="blue" href="#">Box13</a>
  <a class="green" data-category="green" href="#">Box14</a>
  <a class="red" data-category="red" href="#">Box15</a>
  <a class="blue" data-category="blue" href="#">Box16</a>
</div>

【css】
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font: 18px/1.65 sans-serif;
  text-align: center;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;    
  display: block;
  color: #333;
}

h2 {
  color: #333;
  padding: 10px 0;
}

.filter {
  margin: 30px 0 10px;
}

.filter a {
  display: inline-block;
  padding: 10px;
  border: 2px solid #333;
  position: relative;
  margin-right: 20px;
  margin-bottom: 20px;
}

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.boxes a {
  width: 23%;
  border: 2px solid #333;
  margin: 0 1% 20px 1%;
  line-height: 60px;
}

.all {
  background: khaki;
}

.green {
  background: lightgreen;
}

.blue {
  background: lightblue;
}

.red {
  background: lightcoral;
}

.filter a.active:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 15px 0 0;
  border-color: #333 transparent transparent transparent;
}

.is-animated {
  animation: .6s zoom-in;
}

@keyframes zoom-in {
  0% {
   transform: scale(.1);
  } 
  100% {
    transform: none;
  }
}


【js】
(function($) {

  'use strict';

  var $filters = $('.filter [data-filter]'),
    $boxes = $('.boxes [data-category]');

  $filters.on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    
    $filters.removeClass('active');
    $this.addClass('active');

    var $filterColor = $this.attr('data-filter');

    if ($filterColor == 'all') {
      $boxes.removeClass('is-animated')
        .fadeOut().finish().promise().done(function() {
          $boxes.each(function(i) {
            $(this).addClass('is-animated').delay((i++) * 200).fadeIn();
          });
        });
    } else {
      $boxes.removeClass('is-animated')
        .fadeOut().finish().promise().done(function() {
          $boxes.filter('[data-category = "' + $filterColor + '"]').each(function(i) {
            $(this).addClass('is-animated').delay((i++) * 200).fadeIn();
          });
        });
    }
  });

})(jQuery);

行動規範の内容に同意します

回答1件

ベストアンサー

ざっくり

javascript
1<style>
2.active{color:red}
3</style>
4<script>
5$(function(){
6  $('.cta a').on('click',function(e){
7    e.preventDefault();
8    $(this).addClass('active').siblings().removeClass('active');
9    var filter=$('.cta a.active').data('filter');
10    $('.boxes a').toggle(filter=='all').filter(function(){return $(this).data('category')==filter}).show();
11  }).filter('.active').trigger('click');
12});
13</script>
14<div class="cta filter">
15  <a class="all active" data-filter="all" href="#" role="button">Show All</a>
16  <a class="green"      data-filter="green" href="#" role="button">Show Green Boxes</a>
17  <a class="blue"       data-filter="blue" href="#" role="button">Show Blue Boxes</a>
18  <a class="red"        data-filter="red" href="#" role="button">Show Red Boxes</a>
19</div>
20
21<div class="boxes">
22  <a class="red"   data-category="red"   href="#">Box1 r</a>
23  <a class="green" data-category="green" href="#">Box2 g</a>
24  <a class="blue"  data-category="blue"  href="#">Box3 b</a>
25  <a class="green" data-category="green" href="#">Box4 g</a>
26  <a class="red"   data-category="red"   href="#">Box5 r</a>
27  <a class="green" data-category="green" href="#">Box6 g</a>
28  <a class="blue"  data-category="blue"  href="#">Box7 b</a>
29  <a class="red"   data-category="red"   href="#">Box8 r</a>
30  <a class="green" data-category="green" href="#">Box9 g</a>
31  <a class="blue"  data-category="blue"  href="#">Box10 b</a>
32  <a class="red"   data-category="red"   href="#">Box11 r</a>
33  <a class="green" data-category="green" href="#">Box12 g</a>
34  <a class="blue"  data-category="blue"  href="#">Box13 b</a>
35  <a class="green" data-category="green" href="#">Box14 g</a>
36  <a class="red"   data-category="red"   href="#">Box15 r</a>
37  <a class="blue"  data-category="blue"  href="#">Box16 b</a>
38</div>
39

投稿2019/09/18 10:23

yambejp

総合スコア116694

yambejp

2019/09/18 10:41

classとカスタムデータにおなじものを入れるくらいならどちらか片方にしたほうがよいでしょうフィルタしたい要素がredかつgreenなど組み合わせが必要ならclass そうでないならカスタムデータで良いと思います

yyyddd

2019/09/18 11:30

ご回答ありがとうございます。いただいたコードを元にプルダウン仕様にカスタマイズさせていただきました。カスタマイズしたコードを念の為貼っておきます。感謝いたします。【HTML】 <select id="cta" class="cta filter"> <option value="all">Show All</option> <option value="green">Show Green Boxes</option> <option value="blue">Show Blue Boxes</option> <option value="red">Show Red Boxes</option> </select> <div class="boxes"> <a class="red" data-category="red" href="#">Box1 r</a> <a class="green" data-category="green" href="#">Box2 g</a> <a class="blue" data-category="blue" href="#">Box3 b</a> <a class="green" data-category="green" href="#">Box4 g</a> <a class="red" data-category="red" href="#">Box5 r</a> <a class="green" data-category="green" href="#">Box6 g</a> <a class="blue" data-category="blue" href="#">Box7 b</a> <a class="red" data-category="red" href="#">Box8 r</a> <a class="green" data-category="green" href="#">Box9 g</a> <a class="blue" data-category="blue" href="#">Box10 b</a> <a class="red" data-category="red" href="#">Box11 r</a> <a class="green" data-category="green" href="#">Box12 g</a> <a class="blue" data-category="blue" href="#">Box13 b</a> <a class="green" data-category="green" href="#">Box14 g</a> <a class="red" data-category="red" href="#">Box15 r</a> <a class="blue" data-category="blue" href="#">Box16 b</a> </div> 【js】 $(function(){ $('.cta').change(function() { var filter=$('#cta').val(), $boxes = $('.boxes [data-category]');; $('.boxes a').toggle(filter=='all').filter(function(){return $(this).data('category')==filter}).show(); var $filterColor = $('#cta').val(); if ($filterColor == 'all') { $boxes.removeClass('is-animated') .fadeOut().finish().promise().done(function() { $boxes.each(function(i) { $(this).addClass('is-animated').delay((i++) * 200).fadeIn(); }); }); } else { $boxes.removeClass('is-animated') .fadeOut().finish().promise().done(function() { $boxes.filter('[data-category = "' + $filterColor + '"]').each(function(i) { $(this).addClass('is-animated').delay((i++) * 200).fadeIn(); }); }); } }); });

行動規範の内容に同意します