開発情報・ナレッジ

投稿者:SPIRERS ナレッジ向上チーム 2021年11月26日 (金)

jQueryでセレクトをドリルダウン表示する

選択したセレクト項目の内容によって、下位層のセレクト項目の内容を絞り込む方法(ドリルダウン表示)をご紹介します!

文章だと分かりづらいので、とりあえずDEMOを触ってみてください! 「会社名」「部署名」「役割」の3つのセレクト項目があり、「会社名」で選択した項目によって、「部署名」「役割」の選択肢が絞り込まれます。

フォームの設定

今回は「会社名」「部署名」「役割」のセレクト項目をドリルダウン表示させるため、「セレクト」項目を3つ準備します。
(フォーム編集前イメージ)

HTMLの設定

3つのセレクト項目は上から順に「階層」を定義します。
階層毎に<select>タグのid属性に階層を指定します。
また、連動させたいセレクト項目をグルーピングするため、class属性に「group1」をつけます。
※統一されていれば「group1」以外の名称でも構いません。
では、実際に今回のデモのHTMLを1階層目から順に見ていきます。

(1)「会社」の<select>タグにid属性とclass属性を追記します。
<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>
(2)「部署」の<select>タグにid属性とclass属性を追記します。
<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>
選択した「会社」によって、表示する「部署」を制御したいため、<option>タグのclass属性には「p+会社のvalue値」を指定します。
(3)「役割」の<select>タグにid属性とclass属性を追記します。
<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>
  <option value="3" class="p1">ITコンサルタント</option>
  <option value="4" class="p2">デザイナー</option>
  <option value="5" class="p2">コーダー</option>
  <option value="6" class="p2">プロジェクトマネージャー</option>
  <option value="7" class="p3">SE</option>
  <option value="8" class="p3">ネットワークエンジニア</option>
  <option value="9" class="p3">サーバエンジニア</option>
  <option value="10" class="p4">売買営業</option>
  <option value="11" class="p4">投資営業</option>
  <option value="12" class="p4">ディベロッパー</option>
  <option value="13" class="p5">仲介営業</option>
  <option value="14" class="p5">事務</option>
  <option value="15" class="p5">経理</option>
  <option value="16" class="p6">運営業務</option>
  <option value="17" class="p6">貿易事務</option>
  <option value="18" class="p6">事業企画</option>
  <option value="19" class="p7">企業法務</option>
  <option value="20" class="p7">コンプライアンス統括</option>
  <option value="21" class="p7">税務事務</option>
  <option value="22" class="p8">ドイツ支社員</option>
  <option value="23" class="p8">メキシコ支社員</option>
  <option value="24" class="p8">ベトナム支社員</option>
</select>
選択した「部署」によって、表示する「役割」を制御したいため、<option>タグのclass属性には「p+部署のvalue値」を指定します。

jQueryの設定

(1)今回はjQueryを利用するため、jQueryを読み込んでください。

(2)フォームの</head>タグの上に以下のコードを貼り付けます。
<script type="text/javascript">
 
  $(document).ready(function(){
      $(this).tgHierSelectV2({
          group: 'group1',
          maxLevel: '5',
          defaultSelect: '----- 選択してください -----',
      });
  });
 
  (function($){
    $.fn.tgHierSelectV2 = function(options){
 
        var opts = $.extend({}, $.fn.tgHierSelectV2.defaults, options);
        var cnt;
        var arr = [];
 
        $('html').find('select.'+opts.group).each( function(){
 
            // nameのレベル番号取得
            var lvTxt = parseInt($(this).attr('id').replace(/lv/, ""));
 
            // プルダウンのoption内容をコピー
            arr[lvTxt] = $('#lv'+lvTxt+' option').clone();
 
            // プルダウン選択時処理
            $('#'+this.id).change( function(){
 
                // プルダウン選択値
                var pdVal = $(this).val();
 
                // レベル文字を取得し数値化
                var currentLvNum = parseInt($(this).attr('id').replace(/lv/, ""));
                var nextLevelNum = currentLvNum+1;
 
          // プルダウン操作
          $('#lv'+nextLevelNum).removeAttr("disabled");              // 子プルダウンの"disabled"解除
          $('#lv'+nextLevelNum+" option").remove();                 // 一旦、子プルダウンのoptionを削除
          $(arr[currentLvNum+1]).appendTo('#lv'+nextLevelNum); // (コピーしていた)元の子プルダウンを表示
          $('#lv'+nextLevelNum+" option[class != p"+pdVal+"]").remove();  // 選択値以外のクラスのoptionを削除
 
                // デフォルトのoptionを先頭に表示
                for(cnt=nextLevelNum; cnt<=opts.maxLevel; cnt++){
                 $('#lv'+cnt).prepend('<option value="0" selected="selected">'+opts.defaultSelect+'</option>');
                }
                // 変更したプルダウン以下の子プルダウンを全てdisabledに
                if((nextLevelNum+1) <= opts.maxLevel){
                    for(i=nextLevelNum+1; i<=opts.maxLevel; i++){
                        $('#lv'+i).attr("disabled", "disabled");
                    }
                }
            });
        });
    }
})(jQuery);
</script>
以下の設定値は下記の通りです。
$(document).ready(function(){
  $(this).tgHierSelectV2({
    group: 'group1',
    maxLevel: '5',
    defaultSelect: '----- 選択してください -----',
  });
});
group 「2. HTMLの設定」で<select>タグにつけたclass属性を指定します。
例:'group1'
maxLevel 階層の数を指定します。
例:'5'
defaultSelect 未選択状態のセレクト項目の値を指定します。
例:'-- 選択してください --'
以上で設定は完了です。

今回は以下のページを参考にさせていただきました。
【jQuery】連動プルダウン用プラグイン『jquery.tgHierSelect』をより簡単に設置できるようバージョンアップ

複雑なJavaScriptを組むことなくドリルダウン表示を実装することができるので、ぜひお試しください。
解決しない場合はこちら コンテンツに関しての
要望はこちら