スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQueryで複数条件で連動するプルダウン(SELECT FORM)

jQueryの連動型プルダウン(SELECT)プラグイン「Multi HierSelect plugin 2.0」です。
一対一の連動だけでなく複数の親の値を条件として子・孫のリストを絞りこめます。

よくあるjQueryでの連動型プルダウン(いわゆるHierSelect/ハイアセレクト)の一種です。連動型プルダウンとは、2つ以上のSELECTフォームがあった場合、あるSELECTを選択するとその内容で他のSELECTが絞り込まれるとかいうものです。例えば都道府県と市町村のSELECTがそれぞれあった場合に都道府県で「北海道」を選択すると「札幌市」「函館市」とか出るというやつです。

連動型プルダウンをjQueryで実装する場合大きくわけて2つの方法があり、ひとつはAJAXを使ってサーバ側で絞り込んだリストを持ってくる方法。もうひとつは、全リストをサーバから得ておいて、クライアント側で絞込みを実行する方法。前者は通信とサーバ処理負荷のオーバーヘッドが生じますが、膨大な選択肢がある場合はそちらが向いてます。反対に後者は、選択肢があまり多くない場合(300個程度?)に向いています。

このjQueryプラグインは後者の方法で作られています。前者のも作ったけどクソ重いので破棄しました。

特徴として、一対一ではなく多対一の絞込みが可能です。例えば、上記の例のようにある市町村は必ずある1つの都道府県に所属しているという関係の場合は一対一で良いのですが、「会社」「部署」「係」という3つのSELECTがあって、係が「契約係」「経理係」というような場合、部署に係をくっつけてしまうと、A社では営業部に契約係があるけどB社では経理部にあるよ、というような場合にうまく表現できません。これを一対一で表現しようとすると「A社契約係」「B社契約係」とリストを用意する必要が生じます。それは気持ち悪いですよね。A社かつ営業部の場合、B社かつ経理部の場合に契約係を表示したいですよね。

このプラグインでは、複数の親の値を子のclassに設定しておいて、いざ親が更新されたら、親のペア(または3つ以上)の値の組み合わせが子のclassにあるかを判定する・・・という手法を取っています。

細かい使用方法はスクリプトに書いてますのでそちらを参照してください。リストがうまく貼れないのでテキストファイル化しました。ダウンロード後、「jquery.hselect.js」とリネームしてご利用ください。一応、InternetExplorer6以上の環境で動作を確認しています。

jquery.hselect.js

Pagination

Trackback

Trackback URL

http://muurimemo.blog.fc2.com/tb.php/24-1fd33aeb

Comment

Post Your Comment

コメント:登録フォーム
公開設定

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。