jQuery：セレクトボックスで写真の表示を切り替える

だま
だま

セレクトボックスの選択で写真の表示を切り替えるjQueryのメモです。
動作サンプルは↓こんな感じ。

selecychange.gif

デモページ

html

まずはセレクトボックス、切り替えを行うブロックを作成。
セレクトボックスのvalueと切り替えするブロックのidには同じ値を入力します。今回は"photo+連番"で作成しました。


<select id="selectPhoto">
  <option value="photo01" selected="selected">とてもかわいい鳥</option>
  <option value="photo02">つくね</option>
  <option value="photo03">ウルトラかわいい鳥</option>
  <option value="photo04">ネギ塩レバー</option>
</select>

<ul>
  <li id="photo01">
    <img src="photoImg01.jpg" alt="とてもかわいい鳥">
    <p>この世の宝</p>
  </li>
  <li id="photo02">
    <img src="photoImg02.jpg" alt="つくね">
    <p>おいしい</p>
  </li>
  <li id="photo03">
    <img src="photoImg03.jpg" alt="ウルトラかわいい鳥">
    <p>自分でアゴをかく</p>
  </li>
  <li id="photo04">
    <img src="photoImg04.jpg" alt="ネギ塩レバー">
    <p>おいしい</p>
  </li>
</ul>

CSS

切り替えを行うブロック部分の1番目以外の要素を非表示にしておきます。

/* 装飾は省略 */
ul li:nth-of-type(n+2){ display: none; }

jQuery

セレクトボックスを操作した時の動作を記述します。

$(function(){
  $('#selectPhoto').change(function () {
    //選択したoptionのvalueを取得
    var val = $(this).val();
    //先頭に#を付けてvalueの値をidに変換
    var selectPhotoId = '#' + val;
    //一度すべてのブロックを非表示にする
    $('ul li').hide();
    //選択したブロックのみを表示
    $(selectPhotoId).show();
  });
});

今回は写真の切り替えとして紹介しましたが、ブロックの中に入れる要素を変えればけっこう万能に使えると思います。

関連記事