macoblog

「ゲーム × プログラミング」で生きていく

アプリ検索ツール(β版)を公開

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

JavaScript プログラミング

「表示を切り替える事で絞り込み機能を実装したい」こんな要望に答えます。

jQueryを使えば簡単に実装することが可能です、基礎的な処理しか使いませんので初心者の方向けです。

プログラミングを勉強中の方は参考にどうぞ。

表示を切り替える

これってよく使うんですよね、本記事ではjQueryを使ってこれを実装してみます。

「表示切り替えでできる絞り込み機能」の実装イメージを見てみましょう。

完成イメージ

「表示切り替えでできる絞り込み機能」の実装イメージ

よくあるやつです、セレクトボックスの値を変更し対応した要素を表示させています。

今回はこれを実装してみます、それでは見ていきましょう。

サンプルコードは初心者にもわかりやすいよう冗長なものとなっています、ご容赦ください。

方法は簡単【コピペで確認OK】

特に難しいことはしません、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です。

初心者向けの記事をこれからも上げていこうと思いますので、勉強に役立てていただければなと思います。

以上になります。

Twitterでも情報や経過を発信していますのでフォローよろしくお願いします。

不明点やアドバイスなどありましたら、コメントかTwitterからお願いします。