html - 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. 打开this jsFiddle的 fullscreen result在完全更新的 iPhone 4S 上；
2. 点击选择将其打开。

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

1. 在 native 下拉控件中向下滚动，直到“选项 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 有这个问题，单选列表可以有两个元素被选中，这显然是一个错误。