【jQuery】3つのプルダウンを連動させるプラグイン『jquery.tgHierSelect』を作ってみた
2018/09/08
以前より作るってみたかった連動プルダウン（「HierSelect」とか「ドリルダウン」とか言うらしい）を時間が空いたので作ってみました。
2014/05/02 追記
より簡単に記述できるようバージョンアップしたスクリプトを以下ページで紹介しています。
【jQuery】連動プルダウン用プラグイン『jquery.tgHierSelect』をより簡単に設置できるようバージョンアップ
https://nodoame.net/archives/5124
https://nodoame.net/archives/5124
jQueryで連動プルダウン
やりたいことは、Lv1プルダウンの選択値に応じてLv2プルダウンの内容を変更、同様にLv2の選択値に応じてLv3の内容を変更していく、というもの。
当初は選択値によって、option の display を切り替えて作っていたのですが、chromeじゃ不安定、IEじゃ全く動かないという事に気づき、違うアプローチに変更。
新しく考えた方法はわずか3時間で出来上がりました。
見方を変えるって大切ですね。
そんなわけで作ったものを公開。
プルダウン内容
プルダウン内容は以下とします。
1階層目
|
1 2 3 4 5 6 |
<select name="lv1" id="lv1Pulldown"> <option value="0" selected="selected">▼選択</option> <option value="1">ファッション</option> <option value="2">ドリンク・お酒</option> <option value="3">パソコン・周辺機器</option> </select> |
2階層目
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<select name="lv2" id="lv2Pulldown" disabled="disabled"> <option value="0">▼選択</option> <option value="4" class="p1">バッグ</option> <option value="5" class="p1">シューズ</option> <option value="6" class="p1">ファッション小物</option> <option value="7" class="p2">ワイン</option> <option value="8" class="p2">洋酒</option> <option value="9" class="p2">焼酎</option> <option value="10" class="p3">タブレットPC</option> <option value="11" class="p3">ノートPC</option> <option value="12" class="p3">デスクトップPC</option> </select> |
3階層目
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<select name="lv3" id="lv3Pulldown" disabled="disabled"> <option value="0">▼選択</option> <option value="13" class="p4">アタッシュケース</option> <option value="14" class="p4">ウエスト、ヒップバッグ</option> <option value="15" class="p4">ショルダーバッグ</option> <option value="16" class="p5">ビジネスシューズ</option> <option value="17" class="p5">ローファー</option> <option value="18" class="p5">スニーカー</option> <option value="19" class="p6">財布、コインケース</option> <option value="20" class="p6">パスケース、定期入れ</option> <option value="21" class="p6">名刺入れ</option> <option value="22" class="p7">赤ワイン</option> <option value="23" class="p7">白ワイン</option> <option value="24" class="p7">ロゼワイン</option> <option value="25" class="p8">ウィスキー</option> <option value="26" class="p8">ブランデー</option> <option value="27" class="p8">リキュール</option> <option value="28" class="p9">芋焼酎</option> <option value="29" class="p9">麦焼酎</option> <option value="30" class="p9">米焼酎</option> <option value="31" class="p10">Nexus7</option> <option value="32" class="p10">iPad</option> <option value="33" class="p10">WindowsRT</option> <option value="34" class="p11">大型ノート</option> <option value="35" class="p11">A4サイズノート</option> <option value="36" class="p11">ウルトラブック</option> <option value="37" class="p12">モニタ一体型</option> <option value="38" class="p12">モニタセパレート型</option> <option value="39" class="p12">サーバーマシン</option> </select> |
それぞれ class名を "p親value" として親子関係を関連付けています。
サンプル
まずは html 内に Javascript をベタに書いてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<script type="text/javascript"> $(document).ready(function(){ // プルダウンのoption内容をコピー var pd2 = $("#lv2Pulldown option").clone(); var pd3 = $("#lv3Pulldown option").clone(); // 1→2連動 $("#lv1Pulldown").change(function () { // lv1のvalue取得 var lv1Val = $("#lv1Pulldown").val(); // lv2Pulldownのdisabled解除 $("#lv2Pulldown").removeAttr("disabled"); // 一旦、lv2Pulldownのoptionを削除 $("#lv2Pulldown option").remove(); // (コピーしていた)元のlv2Pulldownを表示 $(pd2).appendTo("#lv2Pulldown"); // 選択値以外のクラスのoptionを削除 $("#lv2Pulldown option[class != p"+lv1Val+"]").remove(); // 「▼選択」optionを先頭に表示 $("#lv2Pulldown").prepend('<option value="0" selected="selected">▼選択</option>'); // lv3Pulldown disabled処理 $("#lv3Pulldown").attr("disabled", "disabled"); $("#lv3Pulldown option").remove(); $("#lv3Pulldown").prepend('<option value="0" selected="selected">▼選択</option>'); }); // 2→3連動 $("#lv2Pulldown").change(function () { // lv2のvalue取得 var lv2Val = $("#lv2Pulldown").val(); // lv3Pulldownのdisabled解除 $("#lv3Pulldown").removeAttr("disabled"); // 一旦、lv3Pulldownのoptionを削除 $("#lv3Pulldown option").remove(); // (コピーしていた)元のlv3Pulldownを表示 $(pd3).appendTo("#lv3Pulldown"); // 選択値以外のクラスのoptionを削除 $("#lv3Pulldown option[class != p"+lv2Val+"]").remove(); // 「▼選択」optionを先頭に表示 $("#lv3Pulldown").prepend('<option value="0" selected="selected">▼選択</option>'); }); }); </script> |
これで、3階層のプルダウンが連動してくれます。
IE10、chrome、forefoxにて動作を確認しました。
サンプルデモ
プラグイン化
せっかくなのでプラグイン化してみました。
同じような処理が並んでいるのを何とかしたかったのですが、力不足（苦笑）。
ほぼそのままを外部ファイル（プラグイン）化しています。
プラグイン版デモ
プラグイン版ダウンロード
理論的には2→3と同様に、ルーチンを増やしていけば4階層、5階層も可能な気がしますが、
そこまで深い階層のプルダウンの使い方ってのがあまり思い浮かばなかったのでとりあえず3階層としています。
(2014/05/02 追記)ハージョンアップしました
より簡単に記述できるようバージョンアップしたスクリプトを以下ページで紹介しています。
【jQuery】連動プルダウン用プラグイン『jquery.tgHierSelect』をより簡単に設置できるようバージョンアップ
https://nodoame.net/archives/5124
https://nodoame.net/archives/5124