iOS Safari直观地为单个选择选择多个选项 [英] iOS Safari selecting multiple options visually for single select

问题描述

我正在使用此空optgroup"解决方法，以使iOS能够长时间显示option元素以可读的方式显示文本.我正在使用以下代码来测试此解决方案:

I'm using this "empty optgroup" workaround to get iOS to show option elements with long text in a readable manner. I'm using the following code to test this solution:

<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能够显示长条包装的选项，以便再次区分它们，但这带来了另一个问题，即使选择了多个项目，单选下拉菜单.

It does make iOS Safari display the long options wrapped so they're distinguishable again, but it opens up another problem where multiple items seem selected even though it is a single select dropdown.

要复制:

1. 打开此jsFiddle 的

1. Open this jsFiddle's fullscreen result on a fully updated iPhone 4S;
2. Tap the select to open it.

请注意，现在已选择选项A".

Notice that "Option A" is now selected.

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

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

End result is that two options seem to be selected:

显然，预期结果是仅选择了"E".

The expected result obviously is that only "E" is selected.

我该如何解决这个问题?

How can I solve this issue?

推荐答案

当我以编程方式重新填充并在组合框中选择默认项以响应另一个字段时，我发现没有optgroup元素的问题变化.我发现我只需要先清除旧选择:

I found this issue without the optgroup element, when I was programmatically re-populating and selecting a default item in a combo box, in response to another field changing. I found that I simply had to clear out the old selection first:

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

只有Safari出现了此问题，这显然是一个错误，即单选列表可以同时选择两个项目.

Only Safari had this problem, it's clearly a bug that a single-select list can have two items visibly selected.

这篇关于iOS Safari直观地为单个选择选择多个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！