|
プルダウン（comboボックス）では、複数あるアイテムから1つのアイテムを選択させる時に
用いると便利な機能です。階層が1段階の場合は、そのままHTMLで記述して利用することが
できます。
しかし、2階層、3階層アイテムの種別があった場合、どうすれば良いのでしょうか。
今回は、下記の事例でどうしても連動プルダウンが必要になり木曜日から調べ始めて
いました。
・ア〜ワ行ごとに犬種名を分類し、ア行が選択されたらア行に属する犬種を表示する。
子画面で情報を表示する手段もあるし、思い切って1つのプルダウンにア〜ワの犬種名
を表示させようと思ったのですが、149犬種もデータを作ってしまったので2段階に
することにしました。
ネットでいろいろ探してみると下記の様な手段で実施しているものをみつけました。
・PHP等のViewスクリプト側でデータを生成、整形し、JavaScriptと連動するパターン
・JavaScriptで配列をがんばって作成し、連動させるパターン
・HTML_QuickForm（PERL/PHP?)を利用するパターン
どれも一長一短あり、分かりにくいな〜メンテナンスしにくいな〜と思いprototype.js
を利用したサンプルがないものかと探していたら下記にたどり着きました。
JavaScriptで連動する２つのセレクトメニューを作る
http://kawama.jp/archives/2007/03/javascript_3.html
このままでは少し利用しづらかったので下記の様に修正しました。
1. addEvent(window,'load',init);を次に置き換えました。
Event.observe(window, "load", init);
置き換える意味があるのか分かりませんが気持ちの問題で置き換えました。
2. function init()にsetMenuItem();を追加しました。
onload時に2段目のプルダウンにも情報が表示されるようになります。
3. function setMenuItem()の最後らへんに$('form1').city.options[2].selected = true;を
追加しました。
新規登録のデータのケースは気にする必要がないのですが
更新登録の際に、永続化（ＤＢやＦｉｌｅ）されているデータの
情報を初期時に表示する際にデフォルトチェックが入っていると
良いと思い追記しました。
但しoptions[2]に当たる添え字のチェック実装はいくつか方法があります。
3.1. ajaxを利用し非同期通信でサーバ通信を行う方法
3.2. phpなどのViewスクリプトで添え字の制御を行う方法
3.3. javascriptで自力でがんばる方法
ここまでJavaScriptでがんばったので私は、3.2で実装しようと思います。
3.1に関しては、サーバ側に結果セットを返すＡＰＩ（口）を用意する必要が
あるのでこの場合は必要ないかな〜とおもいました。3.3は単純に私が
JavaScriptが不得手で且つあまりごりごりやりたくなかったので素直にPHP
にしようとおもったしだいです。
あと、http://kawama.jp/archives/2007/03/javascript_3.htmlにはTypoがあるので
そこだけ利用する際に注意していただければ大丈夫です。なんでエラーがでるのか
分からなくてFireFoxのプラグインで確認しちゃいました。
実装しようと思えば他にもやり方はあるかもしれませんが私はこれが良いかなと
思いました。
あと、サーバ側から2階層分のカテゴリーデータをどうやってもらうか思案中です。
PHP側で描画時にJavaScriptのJSONデータを作ってしまうか、そもそもJSONを
返すPHPの口を用意するか・・多分前者で実装しそうです。
# ブログの記述量の関係上、サンプルが欲しい方は、rakuten200802アットyahoo.co.jpまで
メールを頂ければお送りいたします。
| 
コメント（0）
2012
芸能人・有名人の新着記事
