よく見るやつ。formのselectが2つ。一方を選択すると他方の内容が変わるというやつ。ドロップダウンリストというかプルダウンリストというかセレクトボックスというか。よく見るやつなので、サンプルもたくさん転がっているだろうと思ったのだけど、求めるものズバリなのがなかったので一から作った。
単に連動するというだけでなく、optionの定義は配列でしたい、というのがポイント。HTMLにoptionの要素をそのまま書くというのは避けたい。
メンテナンスが面倒になる。
流用しにくくなるし。
とか、そんな理由で。
とりあえず、大分類－小分類というか、ツリー形式というかそういうやつを想定。
項目名は、Amazonのカテゴリが思い浮かんだのでそれを例にしてみることに。といっても面倒なので要素はすんごく少ないんですけども。
あと、いろいろ面倒なのでjQueryを使用する。
ということで、実際に試せるやつを以下に掲載。jsdo.itを使って。
右上あたりの赤いPlayボタンを押すと動くはず。
配列からoptionを書きだすからなのか、要素が揃うまではちょっと時間がかかる（書き方がおかしいからかも）。そこで、要素が揃うまでは選択の操作をできないようにしてみた（disabled属性）。
また、左のselectを選択しない状態では、右のoptionも決まらない＝表示されないので、こちらも同様に選択できないようにしてみた。
要素ができあがった時点でdisabled属性を削除する。資料によっては、値を””にすればいいというのもあったけど、それではうまくいかない。属性ごとremoveAttr()で削除している。
選択項目とその値が確認できるように、表示用のidなんかも設けたりなんかしちゃったり。
もっとjQueryっぽい書き方があるんだろうなあ、と思いつつも、今書けるのはこの程度。
今回は配列をjsファイルの中に書いているのだけど、実際の運用ではサーバーサイドでデータベースから抽出するプログラムを作ってJSONでAjaxな感じで取得したりするんだろうなあ（書き方が雑すぎ）。
まあ、そんなに変更がないなら今回のやり方でもいいかも。何度もネットワークアクセスが発生するのもどうかと思うし。
問題はその要素をどうやって配列に書き出すのか、ということだったりするのかも。今回はそういうのをある程度自動化できるようなプログラムを作ってみたりしたんだけど、ややこしいのでここでは割愛。
参考にしたのはこのへん。ありがとうございました。
コメント