移动 Safari 多选错误

Question

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

如果您在移动 Safari 上使用多选字段 - 像这样：

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

你会遇到自动选择的问题！

iOS 会在您打开选择后自动选择第一个选项（无需任何用户交互） - 但它不会通过蓝色选择“检查”显示给您。

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

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

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

Answer 1

解决 safari 多选错误和 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。

Answer 2

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

诀窍是在拳头位置添加一个empty and disabled选择选项：

<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 自动选择第一个选项并保持选择值正确且干净！

空选项不可见，选择次数正确。