Eyecatch jQuery

Javascript,jQuery

jQueryで3つのプルダウンを連動(Hierselect)させるプラグインを作ってみた。

2015/11/18

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

jQueryで連動プルダウン

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

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

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

プルダウン内容

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

1階層目

2階層目

3階層目

それぞれ class名を "p親value" として親子関係を関連付けています。

サンプル

まずは html 内に Javascript をベタに書いてみます。

これで、3階層のプルダウンが連動してくれます。
IE10、chrome、forefoxにて動作を確認しました。

サンプルデモ

デモはコチラから。

プラグイン化

せっかくなのでプラグイン化してみました。

同じような処理が並んでいるのを何とかしたかったのですが、力不足(苦笑)
ほぼそのままを外部ファイル(プラグイン)化しています。

プラグイン版デモ

デモはコチラから。

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

ダウンロードはコチラから。

理論的には2→3と同様に、ルーチンを増やしていけば4階層、5階層も可能な気がしますが、
そこまで深い階層のプルダウンの使い方ってのがあまり思い浮かばなかったのでとりあえず3階層としています。

ハージョンアップしました

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

-Javascript,jQuery
-, , , , ,