移动版 Safari 多 select 错误

Question

如果在当前 (iOS 9.2) 移动版 safari 中发现一个非常烦人的错误（自 iOS 7 以来首次出现！）

如果您在移动版 Safari 中使用多个 select 字段 - 像这样：

<select multiple>
    <option value="test1">Test 1</option>
    <option value="test2">Test 2</option>
    <option value="test3">Test 3</option>
</select>

你会遇到自动 selection!

的问题

iOS 在您打开 select 后自动 select 第一个选项（无需任何用户交互）- 但它不会用蓝色 select "check".

因此，如果您现在 select 第二个选项，select 会告诉您两个选项已 selected（但仅突出显示一个为 selected） ...

如果您现在关闭并再次打开 select，iOS 将自动取消 select 第一个值 - 如果您重复，它将再次 selected无需任何用户交互。

这是一个非常烦人的系统错误，它正在破坏用户体验！

Answer 1

经过长时间的研究，我发现了以下（不是最漂亮的）但可行的解决方案：

诀窍是在第一个位置添加一个empty and disabled select选项：

<select multiple>
    <option disabled></option>

    <option value="test1">Test 1</option>
    <option value="test2">Test 2</option>
    <option value="test3">Test 3</option>
</select>

这将防止 iOS 自动 select 第一个选项并保持 selection 值正确和干净！

空选项不可见，select离子计数正确。

Answer 2

Safari multi select 错误和 Empty 和 Disabled 选项勾选相关问题的解决方案：

<select multiple>
<optgroup disabled hidden></optgroup>
<option value="0">All</option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
</select>

在实际选项之前添加一个禁用和隐藏的optgroup。

移动版 Safari 多 select 错误

Mobile Safari multi select bug

html

select

mobile-safari

multi-select

ios