複雑な条件が絡むデータの持ち方
作りたいもの
区分を選択するプルダウンが2つあって、親区分のプルダウンを選択すると子区分のプルダウン中身が切り替わって、合計15パターンぐらいの区分がある感じ。
一方、画面に5個ぐらい項目があるんだけど、プルダウンで選択した区分に従って、「この区分の時は、こっちの項目は表示して、こっちの項目は非表示にする」みたいな制御をする必要がある。
分からないこと
この表示・非表示を決定するための情報をプログラム中でどうやって持ったら綺麗に見えるか。自分が作るとどうしても煩雑で分かりづらい作りになってしまった。
自分がコーディングするとこうなった
実際に動くものを作った。JavaScript のコードをよくご覧いただきたい。
気になるのはデータの持ち方
親区分と子区分のプルダウンで何を選んだかは、最終的に DB に保存するので、連想配列 categories の外側の key と内側の key は定数にしたいし、JavaScript 中にあまりベタ書きしたくなかったりする。
同様に、どの項目を制御するかも、今は配列 parts と 連想配列 display の作りを合わせることで実現しているが、一度作ったあとの改修がとてもしづらい作りになっていると思う。
画面表示を制御するので、最終的には JavaScript にそういうオブジェクトを持った状態にならないと要素を操作できないわけだが、どうも拡張性がないというか、分かりづらいというか。categories の外側の key が #parent-category の option 要素が持つ value と対応していて、内側の連想配列が動的に再構築される #child-category の option 要素になるデータだと読み取りづらい気がするし、display の内側の配列と parts の並びが対応しているとかが分かりづらい気がする。
皆さんだったらこういう処理、どういうオブジェクトを作って制御しようとするだろうか。