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

カテゴリー:Web

2023.03.12公開

2023.03.19更新

ドロップダウンメニューでリストを絞り込む方法がありますが、その中の複数の項目がある場合、一つを取り出してそれと一致するリストをフィルタするスクリプトをjQueryで作ってみました。

<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');
      }

    });
  });
});

この記事のカテゴリー:Web

Author

digital smith - N.A.
Old schoolなMacユーザー。DTPっぽいことや、WebコーディングやMacサポートとかでご飯を食べてきました。興味のあることはとりあえずやってみたいと思っている面倒くさい人。服が作りたくてIllustratorを使ったパターンメイキングを勉強しています。将来は有機農業をやってみたい。

コメントはこちらからどうぞ

CAPTCHA


同一カテゴリーの投稿