色々と手間取った(単に変数名の取り違い)けれど、どうにかこうにか形になった。
プルダウン１で選択したものを元に、プルダウン２を絞り込み表示する。先頭を選んだ場合には全てを表示…という処理が、PCブラウザでもスマホブラウザでも正しく動くようになった。
想定通り、固定ページ内の最後で、現状のプルダウン２のクローンを保持しておき、プルダウン１のonChangeフック関数の内部で、一旦プルダウン２を初期化(pulldown2.length = 0;)してから、該当するオプションオブジェクトを、保持しておいたクローンから抜き出して追加。速度的にも問題ないように思える。想定では間に通信入らないはずだし、これでいいはず。
PCとスマホ両方動くとはいっても、どちらもChromだから当然と言えば当然なので、又別ブラウザでも確認は必要だとは思うけど、今はそこまで厳密な確認は必要ないだろう。
とりあえず、当初目標だった二つのプルダウンの連動というものは達成できたので、次のステップに進もうかな。
次は指定された条件でDBを検索し、その候補を表示するという部分か。
大雑把には次のような感じか。
- 結果はリスト表示
- 表示されたリストを選択してさらに詳細表示が可能
- 検索条件とは同じ画面に表示
まずはここまでを目標にしよう。