複数連動型のプルダウンフォーム

先日、ジッポのオイルが無くなったと思い、新しいのを購入して帰宅しました。すると、いつものオイル置き場に封を切っていない新しいオイルがすでに置いてるのを見つけたフジカワです。大切なところでうっかり何かを切らしたりするのに、こういうどうでもいいところでバックアップを用意してる自分にイラッとします。

絞りこみしたいよね

例えば住所(北海道>札幌市>中央区>南2条>西1丁目)とか、
お店の商品カテゴリ(AV機器>オーディオ>アンプ>マランツ)とか、
絞り込みをすることでぐっとユーザーの負担が減るような仕組みってのは嬉しいですよね。
というわけで今回挑戦してみることに。

まずは諸先輩方のサンプルを拝見することに

とはいえ、わたくし、その辺の知識は非常に疎い。と言いますか、そもそもjavascriptと正面から向き合った経験がない。
「理解できればメリット大きいんだろうなぁ」「自分で書けたらどれだけ便利か」とは思うのですが、他にもいろいろ興味とやることが分散しており、いつもつまみ食い程度。なので今回も同様に、諸先輩方の偉大なサンプルを元にカスタマイズして自分に使いやすいようにするところから始める。いつもこうやって弄り回して少しずつ覚えてはきてるけど、一度どこかでまとまった時間を確保して、基本からみっちりマスターしたいなぁ…。

サンプルをいくつか発見

ググること30分、希望の機能を実現できそうなサンプルをいくつかピックアップ。
JavaScript + Ajax 実践サンプル集 – ドロップダウンリストを連動させる|JavaScript + Ajax 実践サンプル集
Auto-populating Select Boxes using jQuery & AJAX|remy sharp’s b:log
PHP-Ajax プルダウンメニューの絞込み その1|まぁいろいろありますよ
連動プルダウン(select)|Mars Diary
それぞれで解説してくれている内容とソースを暫し拝見。熟読。持てる知識とイマジネーションをフル稼働。

まずはシンプルなもので

左近の状況的にはどう考えてもajax,jquery,xmlもしくはjsonなんかを使うべきなのだろうけども、まずはともあれ基本から、また、
「ソースが長くなっても理解しやすい構造」
「何か変更を加えたい部分が発生したときに手を出しやすいシンプルな仕組み」
「さらに多段連動させたい場合、追加がしやすい」
という理由で、
連動プルダウン(select)|Mars Diary
で紹介されているスクリプトを参考にさせて頂くことに。

少しだけカスタマイズ

Mars Diaryさんの解説にもあるとおり、

連動するselectにidを付ける。
親にあたるoptionのvalueと
子にあたるoptgroupのlabelを対応させておく。

とあるのだけれど、こちらの都合で、できれば子labelと対応させる親の属性はvalueじゃないの(ここではidに変更)が望ましい。
というわけでソースを見ながら、どこを変えれば良さそうなのか検討。その結果、
ライブラリとして使っているConnectedSelect.jsの25行目

var oVal = oSel.options[oSel.selectedIndex].value;

var oVal = oSel.options[oSel.selectedIndex].id;

と修正。これでOKな様子。
そしてもう一段セレクタ要素を追加して、

<script type="text/javascript">
ConnectedSelect(['SEL1','SEL2','SEL3','SEL4']);
</script>

と、ConnectedSelestの引数を追加。この後、セレクタ要素のidと一緒に、分かりやすい文字列に変更も。
初心者にとっては、他の方が作られたscriptをいじるのはとても大変。基本を理解していない場合は特に。
jqueryと絡んだライブラリなんてムリ。
ほんとにこんなやり方じゃなくて、基本からやらなきゃダメだなー。僕が覚えるスピードの10倍くらいのスピードで周りは進化してるもんねー。

後は力作業

で、あとは粛々と、1段目から4段目までの選択肢の組み合わせでセレクタとオプションを入力していく。
オプション属性の持ち方はjsonやxmlと違い、基本的に普通のフォームと変わらないつくりなので、コメントと組み合わせると非常に分かりやすくなった。これなら僕レベルの人間が3ヵ月後に久々にソースをみても、すぐに編集の仕方を理解できるはず。

優先すべきは人それぞれ

「ソースが短い」、「芸術的に美しいソース」、「高機能」などなど、スクリプトを評価するポイントというのは色々ありますが、以外に大切だなぁと思うのは「(初心者でも)分かりやすい」もしくは「分からなくても、理解し、編集できるようになるまで時間が掛からないソース」というポイント。僕にとっては日々触れて、頻繁に更新する部分じゃなかったり、スクリプトじゃなかったりすると特にそう。3ヶ月振り、とか半年振りに編集、とかざらなので、できるだけ未来の自分をいたわったソースとコメントタグを残してあげるようにしています。いじるのが自分以外の可能性があったりするとなおさらです。ムリに高度なことして、その時自分に聞かれても分からなかったりすると本末転倒なので。

とはいえ

そろそろいいかげん、
「javascriptですか?書くのは場合によりますが、多少読むくらいなら大丈夫ですよ」
位は言えるようになりたいので、頑張らなきゃー。

コメントを残してみる

コメント