みぎひだりにき

ECサイトや問い合わせフォームなどで、直前の選択肢によって、次の選択肢リストが動的に変わる、というものがある。

このようなページでは、

1、選択肢が変わるたびに、非同期でサーバへアクセスし、次の選択肢の情報を取得する。
2、ページアクセス時に、各選択肢の候補リストをすべてサーバから取得し、動的に選択肢は変わるけれども、非同期でサーバへのアクセスは発生しない。

という2つの作り方がある。

「直前の選択肢に連動して、次の選択肢のリストが変わる」という部分のロジックは同じで、JavaScriptで記述することになると思うが、制作作業量的には、1でも2でもそれほど変わらないので、個人的には1のほうが、より理に適った方法だと思っていた。

ところが、iPhoneのSafariでは、1の方法にすると、ピッカーで選択肢を選び、そのままピッカーの上に出ている「＞」をタップして、次の選択肢に移動した場合、次のピッカーの選択肢がカラになってしまう。非同期で情報を取得するタイミングと、ピッカーが生成されるタイミングの問題かもしれないが、iOS8までのSafariで現象を確認した。バグといっていいと思う。

私は、1の「サーバへ非同期でアクセスする方法」によってページを作り、この問題に遭遇した。

それで、ググってみたところ、動的に選択肢を作る方法を説明したサイトがいくつか見つかったが、この問題についての記述はなく、しかもiPhoneで表示してみると、ピッカーを出したまま移動しても、次の選択肢がちゃんと出てくる！

ちょっと焦ったが、それらのサイトのソースを見たところ、非同期処理ではなく、すべての選択肢候補を最初に配列・変数に入れて、それを動的に呼び出しているものだった。

で、もしかしたら違いは「非同期かどうか？」と、2の方式に直したところ、私の作ったページでもちゃんとピッカー移動で選択肢が出るようになった。

AndroidのChromeでは発生しないし、PCのブラウザでもそもそも関係ない。iPhoneだけというのが悩ましいが、シェアを考えるとiPhoneに合わせるしかない。iPhoneユーザーの多くは、ピッカーの「＞」で移動なんかしない、ということならいいが、そんな統計ないと思うので、非同期アクセスの選択肢は作らない（作れない）、で対応するしかないのかな－。

本日時点で最新のFirefox（バージョン40.0.2）では、JavaScriptで動的に生成したSelect⇒optionの選択肢をマウスで選べない。
具体的には、マウスカーソルの移動と共に、選択肢の反転表示も移動するが、クリックしても、その下の選択肢が選べない。反応しない。
キーボードの矢印キーで移動して、Enter押下では選択できた。

ここでいう「動的に生成」とは、JavaScriptでDOM要素を生成し、それをダイアログボックス形式でブラウザのセンターに表示したもの。
position:absoluteでダイアログボックスを表示し、その中にプルダウンメニューを生成した。

バージョン38.0.5でも問題なかったことを確認済み。
ググったけどヒットしないので、なぜかと思ったが、最新バージョンのバグか！

【追記】
8/28にバージョン40.0.3が落ちてきたが、ソッコーで修正したみたい。選択できるようになったので、この記事で取り上げたバグは解消した。