Web制作ネタ帳
公開日：2016年12月 8日
更新日：2018年10月23日

writer / せんせー

jQueryで選択すると次のコンテンツが変わるセレクトボックスを作ってみよう

こんにちは、せんせーです。

ずいぶん引っ張ってきた沖縄記事も先週で終わりです。
今回はセレクトボックスで何か選んだら、その内容に応じてページコンテンツが一緒に変わるやつを作ってみたいと思います。

製品サポートページとか行くと、大カテゴリを選ぶと次に小カテゴリが選べるようになるUIとか、よくありますよね。そんなイメージです。

実装のポイント

ポイントは3つです。

セレクトボックスの状態が変わったときに処理を実行する
選ばれた内容に応じて表示させる対象をリストにしておく
リストからデータをとりだしてHTMLに書き換える

内容としてはそんなに複雑ではないと思いますが、配列やループを使うので前回より雰囲気難しめかもしれません。考え方がわかればできることの幅が広がりそうです。

１．セレクトボックスを用意

さっそくやってみましょう。
こんなHTMLを想定します。

HTML


<p>カテゴリを選んでください</p>

<select id="parent">

  <option value="">-----------</option>

  <option value="a">カテゴリA</option>

  <option value="b">カテゴリB</option>

  <option value="c">カテゴリC</option>

</select>



<p>製品を選んでください</p>

<select id="child">

  <option value="">-----------</option>

</select>

1つ目はカテゴリの一覧、2つ目はなにも選べない状態のセレクトボックスですね。
これを、1つ目を選んだら2つ目が選べるようにします。

それぞれ#parent、#childというIDを振っているので覚えておいてください。

js


$('#parent').on('change', function(){

  $('#child').html('');



  var option;

  option = '<option value="製品1">製品1</option>';

  $('#child').append(option);

  option = '<option value="製品2">製品2</option>';

  $('#child').append(option);

  option = '<option value="製品3">製品3</option>';

  $('#child').append(option);



});

#parentをchangeしたときにfunctionが実行されます。

まず.html()で#childの中身を空っぽにして、そのあと.append()でoption要素を1行ずつ追加しています。
とりあえず製品1、製品2、製品3という固定のリストが#childセレクトボックスにセットされるはずです。

条件も何も書いてないので#parentで何を選んでも同じ内容になりますが、上の項目を選んだら下の項目が変化するっていうところまでできました。

２．カテゴリと製品のリストを作る

どの項目を選んだら何を表示したいのか、対応表のようなものを作ります。

大抵は外部ファイルとしてJSONやXMLデータを用意したものをパースするかと思いますが、今回はちょっとしたサンプルなのでスクリプトの中に直接書いてしまいます。
ここではa,b,cのカテゴリにそれぞれどの製品が登録されているかというリストになっています。

aとかbとかいうのは#parentのoptionに設定されたvalueの値です。


  var products = {

    a:[

      '製品1',

      '製品2',

    ],

    b:[

      '製品3',

      '製品4',

    ],

    c:[

      '製品5',

      '製品6',

      '製品7',

    ],

  };

productsというオブジェクトを作っています。
この中身を使いたいときは、products[‘a’]とか書くと[ ‘製品1’ , ‘製品2’ ]という配列が取り出せます。

前のコードと合体させてみましょう。

code


<!--[if lte IE 9]>
  var products = {

    a:[

      '製品1',

      '製品2',

    ],

    b:[

      '製品3',

      '製品4',

    ],

    c:[

      '製品5',

      '製品6',

      '製品7',

    ],

  };



  $('#parent').on('change', function(){

    $('#child').html('');



    var option;

    option = '<option value="製品1">製品1</option>';

    $('#child').append(option);

    option = '<option value="製品2">製品2</option>';

    $('#child').append(option);

    option = '<option value="製品3">製品3</option>';

    $('#child').append(option);



  });

３．リストからデータを取り出してHTMLを作る

用意したproductsオブジェクトから#parentで選択されたvalueに対応するカテゴリ情報を取得して、一行ずつ追加していたoption要素をループで一括して出すようにします。

code


var products = {

  a:[

    '製品1',

    '製品2',

  ],

  b:[

    '製品3',

    '製品4',

  ],

  c:[

    '製品5',

    '製品6',

    '製品7',

  ],

};



$('#parent').on('change', function(){

  var cat = $(this).val(); //選択された項目のvalueを取得

  var item = products[cat]; //リストからカテゴリに登録された製品の配列を取得

  $('#child').html('');

  var option;

  for(var i = 0; i < item.length; i++){

    option = '<option value="' + item[i] + '">' + item[i] + '</option>';

    $('#child').append(option);

  }

});

選択されたカテゴリの製品情報をitemに配列として格納しました。
配列の要素数はlengthで取得できるので、登録されている製品の数だけループして、その値をoption要素にセットして1行ずつ追加しています。
製品が3個登録されていれば3行追加されることになりますね。

４．仕上げ

ここまでで「選択内容に応じて次のセレクトボックスの内容が変わる」という要件は満たせました。最後に#parentを未選択状態に戻したときに#childも選択肢を空にする処理をいれてあげたら完成です。

js


var products = {

  a:[

    '製品1',

    '製品2',

  ],

  b:[

    '製品3',

    '製品4',

  ],

  c:[

    '製品5',

    '製品6',

    '製品7',

  ],

};



var noValue = $('#child').html(); //#childの最初の状態を保存



$('#parent').on('change', function(){

  var cat = $(this).val(); //選択された項目のvalueを取得

  if(cat){ //valueに何か値が入っていた場合

    var item = products[cat]; //リストからカテゴリに登録された製品の配列を取得

    $('#child').html('');

    var option;

    for(var i = 0; i < item.length; i++){

      option = '<option value="' + item[i] + '">' + item[i] + '</option>';

      $('#child').append(option);

    }

  }else{ //valueに何も値が入っていない場合

    $('#child').html(noValue); //保存された最初の状態に戻す

  }

option要素のvalue属性と文字列に、リストに設定された値をセットしています。

配列の呼び出し方などを間違えなければそんなに難しくないと思います。こういう実装がちょろっとできるとすっきりしたUIが作りやすくなるんじゃないでしょうか。

DEMO

2段階の選択で沖縄の思い出を表示するサンプルです。

カテゴリを選んでください

写真を選んでください

サイドスリーブログ

jQueryで選択すると次のコンテンツが変わるセレクトボックスを作ってみよう

実装のポイント

１．セレクトボックスを用意

２．カテゴリと製品のリストを作る

３．リストからデータを取り出してHTMLを作る

４．仕上げ

DEMO

その他の Web制作ネタ帳ブログ一覧

サイドスリーブログ

jQueryで選択すると次のコンテンツが変わるセレクトボックスを作ってみよう

実装のポイント

１．セレクトボックスを用意

２．カテゴリと製品のリストを作る

３．リストからデータを取り出してHTMLを作る

４．仕上げ

DEMO

社員旅行3日目 – 離島ぶらり一人旅

サイドスリーの今年を振り返る！★2016年思い出ランキング★

その他の Web制作ネタ帳 ブログ一覧

その他の Web制作ネタ帳ブログ一覧