【jQuery】セレクトボックスで表示・非表示を切り替える方法

完成イメージ

よくあるやつです、セレクトボックスの値を変更し対応した要素を表示させています。今回はこれを実装してみます、それでは見ていきましょう。

jQUeryを使った表示切り替え機能の実装

特に難しいことはしません、jQuery初心者でも十分実装できる難易度です。手順を簡単に説明、下記の通りです。

1. 土台となるマークアップ【HTML】
2. 非表示に使用するスタイル【CSS】
3. 表示切り替えの処理

それぞれ解説しますね。

マークアップとスタイルの準備

特別なことはしませんが、一応解説。まずは土台となる要素の作成から。

index.html

<!-- 表示・非表示が切り替える要素 -->
<ul>
  <li class="area">北海道</li>
  <li class="area">東京</li>
  <li class="area">大阪</li>
  <li class="area">兵庫</li>
  <li class="area">京都</li>
</ul>

<!-- 絞り込むためのトリガー -->
<select class="select">
  <option>全て</option>
  <option>北海道</option>
  <option>東京</option>
  <option>大阪</option>
  <option>兵庫</option>
  <option>京都</option>
</select>

表示切り替えの対象をリストで作成し、jQueryで指定するためにクラス「area」を振っています。

切り替え処理を行うトリガーをセレクトボックスで用意し、上記と同様でクラス「select」を振っています。

リストの値とセレクトボックスの値を比較することで絞り込みを行うってことですね。ちなみに、実務ではこの方法はオススメしません。

なぜかというと、それぞれのテキストの値で比較しちゃうとそこに依存しすぎてしまうから、保守性が悪いということですね。

次は非表示の際に使用するスタイルの準備です。これは説明するまでもないですね。

style.css

.hide {
  /* 表示の切り替えに使用する */
  display: none;
}

非表示にしたいときはこれをクラスに追加するだけでOK、表示が切り替わるリストに関しては適当にスタイルして頂ければいいかと。

jQueryで表示切り替えの処理

jQueryを使用するのでhead内でライブラリの読み込みを忘れずにお願いします。忘れたという方は下記をhead内にコピペすればOKです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

それでは処理を見てみましょう。

絞り込み処理

$('.select').on('change', function(){
  // テキストを取得(例：北海道)
  var area = $(this).children(':selected').text();

  $('.area').each(function(){
    // 全て非表示にする(初期化)
    $(this).addClass('hide');

    // '全て'が選択されていれば
    if(area == '全て'){
      // 表示する
      $(this).removeClass('hide');

    // テキスト(例：北海道)が一致していれば
    }else if($(this).html().match(area)){
      // 表示する
      $(this).removeClass('hide');
    }
  });
});

見てわかるように、そこまで難しいことはしていませんね。ポイントは以下になります。

• チェンジイベントで、セレクトボックスの値変更時に着火(1行目)
• セレクトボックスの値を取得(3行目)
• 全て非表示にし初期化(7行目)
• テキストを比較し分岐させることで表示を切り替える(10行目～18行目)

たったこれだけ、簡単ですね。

終わりに

いかがでしたでしょうか？この流れは実務でもよく使うので、覚えて損はないかと思います、「ボタンをクリックすると〇〇が表示される、あるいは非表示になる」を実装したい時とか。

jQueryを難しく感じる、もしくは苦手という方は、こういう簡単なところから感覚を掴んでいけば理解しやすいと思います。

まずコピペで動かしてみて、ちょっと変えて試してみる、これを繰り返せばOKです。初心者向けの記事をこれからも上げていこうと思いますので、勉強に役立てていただければなと思います。

以上になります。