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＆＃39; fullscreen result;
2. 点按select将其打开。

请注意＆＃34;选项A＆＃34;现已被选中。

1. 在本机下拉控件中向下滚动，直到＆＃34;选项A＆＃34;不再可见。
2. 点击以选择＆＃34;选项E＆＃34;。
3. 稍微向后滚动。

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



预期结果显然只有＆＃34; E＆＃34;被选中。

我该如何解决这个问题？

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有这个问题，这显然是一个单选列表可以明显选择两个项目的错误。