TL; DR
iOSでは、multiple属性をつけたselect要素の動作に不具合があります。この不具合は、以下のように先頭にダミーのoptgroupを追加することで回避することができます。
<select multiple> <optgroup style="display:none;"></optgroup> <option>option 1</option> <option>option 2</option> <option>option 3</option> </select>
本文ここから
概要
iOSでセレクトボックスを利用すると、先頭項目が自動選択されます。この機能、複数選択可能なセレクトボックスを利用している場合には不具合を起こすようです。なお、以下の記述については基本的にiOS9.3.xを対象としていますが、StackOverFlowへの投稿を見る限りでは、iOS7の頃から同様の問題が起きていたようです(?)。また、当初はiOS版Safari限定の問題かとも思いましたが、SafariのみならずChromeでも同様の問題が生じることを確認したため、iOSのセレクトボックス一般の問題であろうと思われます。
不具合の内容
iOSにおけるセレクトボックスでは、先頭選択肢が自動的に選択されますが、複数選択可能なセレクトボックスの場合、
- セレクトボックスをアクティブにした時点でまだ先頭項目が選択されていない場合、先頭項目が自動選択される。この場合は、先頭選択肢に関して、表示上のチェックマークと実際の選択状態が逆になる。
- セレクトボックスをアクティブにした時点で既に先頭項目が選択されている場合、逆に先頭項目の選択が自動解除される。この場合は、先頭選択肢に関して、表示上のチェックマークが実際の選択状態と一致する。
という不具合が生じているようです。
問題が確認できる操作例
選択肢が上から順にo1, o2, o3であって、multiple属性を設定したセレクトボックスを考えます。これを例に、不具合を確認するための操作例を説明します。
以下の順に上のセレクトボックスを操作することで不具合が確認できます。
- セレクトボックスを開く
- そのまま何もせず、右上の「完了」を押す
- 先頭選択肢（o1）が選択される
- 何もせずとも先頭選択肢が追加されることがわかります
- このとき、表示上は、先頭選択肢にはチェックマークは付いていないと思います
- なお、この場合に先頭選択肢を選択してみると、チェックマークがついた場合には選択状態から外れた状態になり、チェックマークが外れた場合には選択状態になることが確認できます。つまり、表示と実際の状態があべこべになっている。
- 再度、セレクトボックスを開く
- 再度、そのまま何もせずに右上の「完了」を押す
- 上で選択されていた先頭選択肢（o1）の選択が外れ、選択された項目が0項目になる
- この場合には、先頭選択肢をチェックしたりチェックから外したりする操作によって、表示通りの効果を得られることが確認できる。
対策
この問題は、初回選択時の場合だけでなく、セレクトボックスをアクティブにするたびに生じる問題なのでなかなか対策が難しいものです。
記事「iphoneにおいてselectタグの一番最初の項目が自動的に選択されてしまう | hacknote」では、ダミー項目を先頭に置くことで主たる選択肢において不具合が生じないようにしていましたが、この対応では不要な選択肢がiOSにおいて選択可能となってしまう問題があったのでした。
しかし、以下のようにダミーの<optgroup>要素を追加することでも同様の効果が得られます。
<select multiple> <optgroup disabled style="display:none;"></optgroup> <option>option 1</option> <option>option 2</option> <option>option 3</option> </select>
この方法であればダミー要素が選択されてしまうといった問題は生じないため、これが現状でのベストな対応でしょう。
ただし、この場合であっても不必要な要素が追加されてしまう点には代わりがなく、この不必要な対応が必要最小限の場合にだけ有効化されるよう、User Agentを確認するなどして範囲を限定的にしたほうが良さそうです。
