iPhone 上的 iOS 8 多个 <select> 严重错误？答案

【问题标题】：iOS 8 multiple <select> serious bug on iPhone?iPhone 上的 iOS 8 多个 <select> 严重错误？
【发布时间】：2014-11-24 20:59:15
【问题描述】：

在 iOS 8.0 中，Apple 在 iPhone 上的 Safari 中引入了一个新错误，我认为当使用多个 <select> 元素时，该错误非常严重。例如，通常用于选择出生日期。重现：

创建一个包含两个<select> 的页面，每个页面包含多个<option>
在 iPhone 上的 iOS 8 上的 Safari 中打开（8.0.2 中仍然存在该错误）
点击第一个<select>
选择第三个选项，即三月
请注意，它不会将 <select> 更新为您选择的内容（在 iOS 7 中会更新）
点击第二个<select>元素
注意以下几点：
- 第一个<select> 没有更新
- 第二个<select>显示3（这是第一个<select>的位置）
- 下面的选择器显示 1

您可以通过交替点击第一个和第二个<select> 来重复此操作，并注意它以相同的模式变化。除非您知道模式，否则这可能会随机出现）。如果你还有一个年份选择器，它看起来会更加混乱。

要在您的移动设备上试用，请试试这个 jsfiddle： http://jsfiddle.net/m7baw590/6/embedded/result/

此外，onchange="alert(this.value)" 报告的值不正确（与在第二个 <select> 元素上选择的值相同。您可以在此处查看：http://jsfiddle.net/m7baw590/7/embedded/result/

如果您在每个选择之间单击“完成”或使用箭头进行切换，则不会出现这些错误。

有什么解决方法吗？

【问题讨论】：

【解决方案1】：

我是这样解决问题的：

<select>
    <option></option>
    <option></option>
    <option></option>
    (...)
    <optgroup disabled></optgroup>
</select>

刚刚在<select> 中添加了一个空的<optgroup>。

【讨论】：

令人印象深刻！这行得通！不过，这似乎是一个奇怪的黑客行为。这是一个适用于 iPhone 的小提琴 :) jsfiddle.net/m7baw590/12/embedded/result
这可行，但现在选择选项的界面看起来有点不同，对齐到左侧而不是居中。
控件现在不加载
有人知道 iOS 上的错误报告吗？因为我在 iOS 10.2 和 10.3 上仍然有这种奇怪的行为
在 10.4.4 中仍然存在，解决方法确实有效 if (navigator.userAgent.match(/iPhone/i)) { $('select').each(function () { $(this ).append(""); });

【解决方案2】：

我在 iOS8 中发现了另一个选择字段的错误（仅在 iPhone 上，例如 iPad 似乎很好）。

如何重现：

【讨论】：

我可以确认这个错误。我猜这是由于来自 Apple 的类似错误代码。希望他们尽快解决。
我在 iPhone 5 上的 iOS 8.1.1 中遇到了同样的错误
在 iPhone 5 上的 iOS 8.1.3 上遇到同样的问题。
这对 iPhone 6s 上的 iOS 9.2 仍然有效
刚刚在 iPhone 6+ 上的 iOS 9.2 上遇到了这个多选错误。鉴于它发生在 iOS 7 和 8 以及现在的 9 上，很明显 Apple 不进行回归测试。 “它只是工作”我的**。

【解决方案3】：

我为 iphone Safari 找到的唯一解决方案是禁用所有其他选择框 onfocus 并重新启用所有 onblur。这将强制用户按下 Done。

【讨论】：