jQuery ドリルダウンメニューの実装方法を徹底解説！

本記事では、ウェブサイトのユーザビリティ向上に役立つjQueryドリルダウンメニューの実装方法について、基礎から応用まで分かりやすく解説します。初心者の方でも理解しやすいよう、サンプルコードを交えながら丁寧に解説していくので、ぜひ最後まで読んで実装してみてください。

jQueryでセレクトボックスをドリルダウン表示する方法

Webフォームで複数のセレクトボックスを連動させ、階層的に選択肢を絞り込んでいくUIをドリルダウンと呼びます。ユーザーにとって選択肢が見やすく、操作しやすいフォームを実現できます。

この記事では、jQueryを使ってセレクトボックスをドリルダウン形式で表示する方法を、サンプルコードを交えながら詳しく解説します。

1. デモ

まずは、実際にjQueryで実装したドリルダウンセレクトボックスのデモをご覧ください。

デモ

jQuery ドリルダウン

解説

  • 会社名、部署名、役割の3つのセレクトボックスがあります。

  • 会社名を選択すると、それに紐づく部署名だけが選択肢として表示されます。

  • さらに部署名を選択すると、その部署に属する役割だけが選択肢として表示されます。

2. フォームの設定

ドリルダウン表示を実現するには、複数のセレクトボックスを連動させる必要があります。

今回は、以下の3つのセレクトボックスを使ってドリルダウンを実装します。

  • 会社名

  • 部署名

  • 役割

これらのセレクトボックスは、会社名 ＞ 部署名 ＞ 役割 の順に階層構造になっています。

3. HTMLの設定

各セレクトボックスに階層を定義し、連動させるためのHTMLを設定します。

<select name="company" id="lv1" class="group1">
  <option value="" selected="selected">----- 選択してください -----</option>
  <option value="1">Aデザイン社</option>
  <option value="2">B不動産</option>
  <option value="3">C商事</option>
</select>

<select name="department" id="lv2" class="group1" disabled="disabled">
  <option value="">----- 選択してください -----</option>
  <option value="1" class="p1">開発部</option>
  <option value="2" class="p1">デザイン部</option>
  <option value="3" class="p1">システム技術部</option>
  <option value="4" class="p2">建設企画部</option>
  <option value="5" class="p2">賃貸管理部</option>
  <option value="6" class="p3">生活産業部</option>
  <option value="7" class="p3">総務部</option>
  <option value="8" class="p3">海外支社</option>
</select>

<select name="role" id="lv3" class="group1" disabled="disabled">
  <option value="">----- 選択してください -----</option>
  <option value="1" class="p1">Webエンジニア</option>
  <option value="2" class="p1">プログラマー</option>
  <!-- ... (その他の選択肢) ... -->
</select>

解説

  • 階層の定義: 各セレクトボックスのid属性にlv1、lv2、lv3のように階層番号を指定します。

  • グループ化: 連動するセレクトボックスには、class属性に共通のクラス名（例：group1）を指定します。

  • 選択肢の紐付け: 各選択肢の<option>タグには、上位階層の選択肢と紐付けるためのclass属性を指定します。

    • 例えば、「部署名」の選択肢では、class="p1"は「会社名」のvalue="1"（Aデザイン社）に紐づきます。

    • p + 上位階層のvalue値 という形式でクラス名を付けます。

  • 初期状態: 下位階層のセレクトボックスは、disabled="disabled"で初期状態では選択できないようにします。

4. jQueryの設定

jQueryを使って、セレクトボックスの選択変更イベントを検知し、下位階層の選択肢を動的に変更します。

jQueryの読み込み

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

ドリルダウン処理

$(document).ready(function(){
  $(this).tgHierSelectV2({
    group: 'group1', 
    maxLevel: '3',  
    defaultSelect: '----- 選択してください -----', 
  });
});

(function($){
  $.fn.tgHierSelectV2 = function(options){
    var opts = $.extend({}, $.fn.tgHierSelectV2.defaults, options);
    var cnt;
    var arr = [];

    /* 各階層の選択肢を配列に格納 */
    $('html').find('select.'+opts.group).each( function(){
      var lvTxt = parseInt($(this).attr('id').replace(/lv/, ""));
      arr[lvTxt] = $('#lv'+lvTxt+' option').clone();
    });   

    /* 選択肢の反映処理 */
    $($('select.'+opts.group)).each(function(){
      var pdVal = $(this).val();
      var currentLvNum = parseInt($(this).attr('id').replace(/lv/, ""));
      var nextLevelNum = currentLvNum+1;
      if(pdVal != '' && pdVal != opts.defaultSelect){
        drillDownOption(pdVal,currentLvNum,nextLevelNum);
        $('#lv'+nextLevelNum).prepend('<option selected="selected">'+ opts.defaultSelect + '</option>');
      }
    });

    /* 各セレクトボックスの変更イベント */
    $('html').find('select.'+opts.group).each( function(){
      var lvTxt = parseInt($(this).attr('id').replace(/lv/, ""));
      $('#'+this.id).change( function(){
        var pdVal = $(this).val();
        var currentLvNum = parseInt($(this).attr('id').replace(/lv/, ""));
        var nextLevelNum = currentLvNum+1;
        drillDownOption(pdVal,currentLvNum,nextLevelNum);
        // 変更したプルダウン以下の子プルダウンを全てdisabledに
        for(cnt=nextLevelNum; cnt<=opts.maxLevel; cnt++){
          $('#lv'+cnt).attr("disabled", "disabled").prepend('<option selected="selected">'+opts.defaultSelect+'</option>');
        }
      });
    });

    /* ドリルダウンオプションを表示する関数 */
    function drillDownOption(pdVal,currentLvNum,nextLevelNum){
      $('#lv'+nextLevelNum).removeAttr("disabled");              
      $('#lv'+nextLevelNum+" option").remove();                
      $(arr[currentLvNum+1]).clone().appendTo('#lv'+nextLevelNum); 
      $('#lv'+nextLevelNum+" option[class != 'p"+pdVal+"']").remove(); 
    }
  }
})(jQuery);
解説

  • $(document).ready(function(){ ... });: HTMLの読み込みが完了した後に実行される処理を記述します。

  • $(this).tgHierSelectV2({ ... });: tgHierSelectV2というプラグイン関数を呼び出して、ドリルダウンの動作を設定します。

  • プラグインの設定:

    • group: 連動するセレクトボックスのグループ名（HTMLのclass属性で指定した値）を指定します。

    • maxLevel: 階層の最大数を指定します。今回は3階層なので3を指定します。

    • defaultSelect: 未選択状態の選択肢に表示するテキストを指定します。

  • プラグインのコード (tgHierSelectV2):

    • 各階層の選択肢を配列に格納します。

    • 初期表示時に、選択されている値に基づいて下位階層の選択肢を反映します。

    • 各セレクトボックスの変更イベントを設定し、選択値に基づいて下位階層の選択肢を動的に更新します。

    • drillDownOption関数は、指定された階層のセレクトボックスに、上位階層の選択値に紐づく選択肢だけを表示します。

5. まとめ

jQueryとプラグインtgHierSelectV2を使用することで、複雑なJavaScriptを記述することなく、簡単にセレクトボックスのドリルダウン表示を実装できます。

ユーザーにとって操作しやすいフォームを作成する際に、ぜひ活用してみてください。

参考資料

Q&A

Q1: ドリルダウンメニューは何階層まで対応できますか？

A1: 階層の数に制限はありません。ただし、階層が深くなりすぎるとユーザビリティが低下する可能性があります。

Q2: ドリルダウンメニューのデザインは自由にカスタマイズできますか？

A2: はい、CSSで自由にデザインをカスタマイズできます。色、サイズ、フォント、アニメーション効果などを調整して、ウェブサイトのデザインに最適なドリルダウンメニューを作成しましょう。

Q3: JavaScriptフレームワークを使わずにドリルダウンメニューを実装することはできますか？

A3: はい、JavaScriptのみで実装することも可能です。ただし、jQueryなどのフレームワークを使用すると、コード量が少なくなり、より簡単に実装することができます。

その他の参考記事:jquery dropdownplain