Eyecatch jQuery

Javascript,jQuery

jQueryで連動プルダウン(jquery.tgHierSelect)プラグインをバージョンアップ。

2016/01/18

以前作成した「jquery.tgHierSelect」ですが、連動させるプルダウン数が増えた場合や、同じページに2個以上の連動プルダウンがある場合などに、かなり手を入れないと使えない状態だったので、それらを解決しつつ、オプションの記述もシンプルになるよう、バージョンアップを果たしてみました。

jQueryで連動プルダウン jquery.tgHierSelectV2

jQuery.tgHierSelectVer.2

デモ

今回は5段階、3段階の2種類のプルダウンを1ページ内で連動させています。

HTMLに記載するオプションの記述方法

例の上が5段階連動用、下が3段階用となります。

・group / 連動させるプルダウンのグループ名(例:group1)
・maxLevel / 最大レベル(例:5)
・defaultSelect / デフォルトのオプションとするテキスト(例:▼選択)
を指定して下さい。
全て必須です。

プルダウンの親子関係設定方法

デモ(2)のLv1と2を抜粋して説明します。

子プルダウンのclass名に、親のValue値を "p親value" として親子関係を関連付けします。

ソースコード

プラグイン ダウンロード

ソースはBitbucketにて公開してみました。文字コードをUTF-8にして表示して下さい。
コメントでヘルプを書いているので、大体、何をやっているのかは分かると思います。


Javascriptコード(jquery.tgHierSelectV2.js)


Htmlコード(index.html)


プラグインのダウンロードはこちらから。
jquery.tgHierSelectV2.zip

今考えると、以前のものは使えるレベルではなかった気がしますね(苦笑)

-Javascript,jQuery
-, , , , , ,