[Web]ドロップダウンメニューでリストのフィルタリング[応用編]

<div class="container">
  <div class="list-control">
    <select class="js-select">
      <option value="all">パーソナリティーを選択</option>
    </select>
  </div>
  <div class="js-list">
    <dl class="dlist">
      <dt class="dlist__item-head">バカボン鬼塚／時田ほのか</dt>
      <dd class="dlist__item-body">FAV FOUR（月）</dd>
    </dl>
    <dl class="dlist">
      <dt class="dlist__item-head">バカボン鬼塚</dt>
      <dd class="dlist__item-body">バカボン鬼塚 ABレコ</dd>
    </dl>
    <dl class="dlist">
      <dt class="dlist__item-head">バカボン鬼塚／川崎玲奈</dt>
      <dd class="dlist__item-body">K-mix Wiz.</dd>
    </dl>
    <dl class="dlist">
      <dt class="dlist__item-head">Happyだんばら／小尾渚沙</dt>
      <dd class="dlist__item-body">Saturday Mornig Radio オビハピ</dd>
    </dl>
    <dl class="dlist">
      <dt class="dlist__item-head">バカボン鬼塚／山口五和</dt>
      <dd class="dlist__item-body">HITS THE TOWN</dd>
    </dl>
    <dl class="dlist">
      <dt class="dlist__item-head">川崎玲奈</dt>
      <dd class="dlist__item-body">踊るラジオシャドウ</dd>
    </dl>
    <dl class="dlist">
      <dt class="dlist__item-head">バカボン鬼塚／Happyだんばら</dt>
      <dd class="dlist__item-body">Show-Waトレジャーニー</dd>
    </dl>
  </div>
</div>

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

    .container {
      margin: 0 auto;
      width: 768px;
    }

    .list-control {
      margin-bottom: 10px;
    }

    .dlist {
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
      width: 768px;
    }

    .dlist[data-p="0"] {
      display: none;
    }

    .dlist__item-head {
      flex: 0 1 auto;
      padding: 5px;
      width: 50%;
    }

    .dlist__item-body {
      flex: 0 2 auto;
      padding: 5px;
      width: 50%;
    }

$(function () {
  //dtの値を取得
  let djObjs = $('.js-list dt');
  // console.log(djObjs);
  //個々人を格納する配列を定義
  let djs = [];
  djObjs.each(function (i, e) {
    // パーソナリティーを個人に分割
    let eachProgramDjs = $(e).text().split('／');
    for (j = 0; j < eachProgramDjs.length; j++) {
      if ($.inArray(eachProgramDjs[j], djs) === -1) {
        djs.push(eachProgramDjs[j]);
      }
    }
  });
  console.log(djs);
  // 抽出した配列からセレクタのoption要素を作成、挿入
  let options = '';
  for (k = 0; k < djs.length; k++) {
    // console.log(options);
    options += '<option value="' + djs[k] + '">' + djs[k] + '</option>';
  }
  $('.js-select').append(options);
  // セレクタで選択した項目でフィルタリング
  $('.js-select').on('change', function () {
    console.log($(this).val());
    var filterValue = $(this).val();
    $('.js-list dt').each(function (i, e) {
      if ($(e).text() !== 'all') {
        if ($(e).text().indexOf(filterValue) !== -1) {
          console.log($(e).text());
          $(e).parent('dl').attr('data-p', 1);
        } else {
          $(e).parent('dl').attr('data-p', 0);
        }
      } else {
        $(e).parent('dl').removeAttr('data-p');
      }

    });
  });
});