【jQuery】3つのプルダウンを連動させるプラグイン『jquery.tgHierSelect』を作ってみた

2013/10/31 2018/09/08

以前より作るってみたかった連動プルダウン（「HierSelect」とか「ドリルダウン」とか言うらしい）を時間が空いたので作ってみました。

2014/05/02 追記

より簡単に記述できるようバージョンアップしたスクリプトを以下ページで紹介しています。

【jQuery】連動プルダウン用プラグイン『jquery.tgHierSelect』をより簡単に設置できるようバージョンアップ
https://nodoame.net/archives/5124

jQueryで連動プルダウン

やりたいことは、Lv1プルダウンの選択値に応じてLv2プルダウンの内容を変更、同様にLv2の選択値に応じてLv3の内容を変更していく、というもの。

当初は選択値によって、option の display を切り替えて作っていたのですが、chromeじゃ不安定、IEじゃ全く動かないという事に気づき、違うアプローチに変更。
新しく考えた方法はわずか3時間で出来上がりました。
見方を変えるって大切ですね。

そんなわけで作ったものを公開。

プルダウン内容

プルダウン内容は以下とします。

1階層目

<select name="lv1" id="lv1Pulldown">
<option value="0" selected="selected">▼選択</option>
<option value="1">ファッション</option>
<option value="2">ドリンク・お酒</option>
<option value="3">パソコン・周辺機器</option>
</select>

<option value="1">ファッション</option>

</select>

2階層目

<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>

<option value="6" class="p1">ファッション小物</option>

<option value="10" class="p3">タブレットPC</option>

<option value="11" class="p3">ノートPC</option>

<option value="12" class="p3">デスクトップPC</option>

</select>

3階層目

<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>

<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="24" class="p7">ロゼワイン</option>

<option value="25" class="p8">ウィスキー</option>

<option value="26" class="p8">ブランデー</option>

<option value="27" class="p8">リキュール</option>

<option value="31" class="p10">Nexus7</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 をベタに書いてみます。

<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>

$(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

-Javascript,jQuery
-hierselect, jquery.tgHierSelect.js, 連動プルダウン

: jQueryでサムネイル画像をマウスオーバーするとメイン画像が入れ替わるスクリプトを書いてみた

ECサイトでよくある、サムネイル画像にカーソルを合わせると、メイン画像が入れ替わるというスクリプトをjQueryを使い書いてみたので、公開してみます。プラグイン化もしてみました。

: 【jQuery】フォームの値を取得 / チェックするスクリプト

jQueryを使い、フォーム内容が埋まっているか、選択されているかなどをチェックする方法のメモ。

: jQueryで各国通貨を日本円にするコンバーターを作ってみた。

APIで利用できる通貨をセレクトボックスで選択し、日本円に換算するというスクリプトを作ってみました

: 【JS】定義リスト/記述リスト（dl, dd）タグの個数をカウントするスクリプトをjQueryで作ってみた

このブログの一番人気記事である「三文字略語」のページには現在何個の略字を載っけたのか数えたくなったのですが、いちいち自分で数えるのもバカらしく感じたのでプログラムにやらせてみようと作ってみました。

: 【JS】ラジオボタンの選択値によってテーブルの内容を変更するスクリプトをjQueryで作成する

ラジオボタンの選択値によって指定したテーブルのTRタグ（無論DIVでも）の表示・非表示を変更し、内容を操作するJavascript（jQuery）の紹介です。

PREV: 【JS】jQueryでフォームのdisabledを設定/解除する方法
NEXT: 【JS】jQueryでリストタグ（<li>）のテキストを取得する方法

【jQuery】3つのプルダウンを連動させるプラグイン『jquery.tgHierSelect』を作ってみた

2014/05/02 追記

jQueryで連動プルダウン

プルダウン内容

1階層目

2階層目

3階層目

サンプル

サンプルデモ

プラグイン化

プラグイン版デモ

プラグイン版ダウンロード

(2014/05/02 追記)ハージョンアップしました

【DIY】2x4や1x4など、SPF材サイズ早見表 (563,574)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (278,406)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (256,025)

【歴史】江戸幕府歴代将軍一覧 (143,287)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (130,127)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (129,522)