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

シェアする

こんにちは!若手エンジニアのスパ子です(‘-‘*)

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

文章だと分かりづらいので、とりあえずDEMOを触ってみてください!

参考DEMOはこちら「会社名」「部署名」「役割」の3つのセレクト項目があり、「会社名」で選択した項目によって、「部署名」「役割」の選択肢が絞り込まれます。

▼目次

1. フォームの設定
2. HTMLの設定
3. jQueryの設定

1. フォームの設定

今回は「会社名」「部署名」「役割」のセレクト項目をドリルダウン表示させるため、「セレクト」項目を3つ準備します。

(フォーム編集前イメージ)

2. 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値」を指定します。

(2)「役割」の<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値」を指定します。

3. 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を組むことなくドリルダウン表示を実装することができるので、お試しください。

最後まで読んでいただき、ありがとうございました(*^^*)!

シェアする

フォローする