iOS Safari 为单选直观地选择多个选项

Question

我正在使用this "empty optgroup" workaround 让iOS 以可读的方式显示带有长文本的option 元素。我正在使用以下代码来测试这个解决方案：

<p>Choose something:</p>
<select>
    <option>Option A</option>
    <option>Some other option which is much longer than the first two options that has a distinguising feature at the end: B!</option>
    <option>Some other option which is much longer than the first two options that has a distinguising feature at the end: C!</option>
    <option>Option D</option>
    <option>Option E</option>
    <option>Option F</option>
    <option>Option G</option>
    <optgroup label=""></optgroup>
</select>

optgroup { display: none; }

它确实使 iOS Safari 显示包裹的长选项，以便它们再次可区分，但它会带来另一个问题，即 多个项目似乎被选中，即使它是单选下拉菜单。

复制：

1. 在完全更新的 iPhone 4S 上打开 this jsFiddle 的 fullscreen result；
2. 点击select 将其打开。

请注意，现在选择了“选项 A”。

1. 在本机下拉控件中向下滚动，直到“选项 A”不再可见。
2. 点击选择“选项 E”。
3. 向后滚动一点。

最终结果是似乎选择了两个选项：

预期的结果显然是只选择了“E”。

我该如何解决这个问题？

Answer 1

我在没有optgroup 元素的情况下发现了这个问题，当我以编程方式重新填充并选择组合框中的默认项以响应另一个字段更改时。我发现我只需要先清除旧的选择：

$("#time")[0].selectedIndex = -1 // this fixed it for me
$("#time option").each(function () {
        if ($(this).val() == oldtime) {
            $(this).attr("selected", "selected");
            return;
        }
});

只有 Safari 有这个问题，这显然是一个错误，单选列表可以有两个可见的项目。