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

Html iOS Safari为单选直观地选择多个选项,html,ios,css,safari,mobile-safari,Html,Ios,Css,Safari,Mobile Safari,我使用它让iOS以可读的方式显示带有长文本的选项元素。我正在使用以下代码测试此解决方案: 选择一些: 方案A 还有一个比前两个选项长得多的选项,这两个选项的末尾有一个区别功能:B! 还有一个比前两个选项长得多的选项,这两个选项的末尾有一个区分功能:C! 方案D 选项E 选项F 选项G optgroup{display:none;} 它确实让iOS Safari显示了包装好的长选项,这样它们就可以再次区分了,但它也带来了另一个问题,即多个项目似乎被选中了,即使它是一个单选下拉列表 复制: 在完

我使用它让iOS以可读的方式显示带有长文本的
选项
元素。我正在使用以下代码测试此解决方案:

选择一些:

方案A 还有一个比前两个选项长得多的选项,这两个选项的末尾有一个区别功能:B! 还有一个比前两个选项长得多的选项,这两个选项的末尾有一个区分功能:C! 方案D 选项E 选项F 选项G
optgroup{display:none;}
它确实让iOS Safari显示了包装好的长选项,这样它们就可以再次区分了,但它也带来了另一个问题,即多个项目似乎被选中了,即使它是一个单选下拉列表

复制:

  • 在完全更新的iPhone4S上打开
  • 点击
    选择
    ,将其打开 请注意,“选项A”现在已选中

  • 在本机下拉控件中向下滚动,直到“选项A”不再可见
  • 点击以选择“选项E”
  • 向后滚动一点
  • 最终结果是,似乎选择了两个选项:

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


    如何解决此问题?

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

    $("#time")[0].selectedIndex = -1 // this fixed it for me
    $("#time option").each(function () {
            if ($(this).val() == oldtime) {
                $(this).attr("selected", "selected");
                return;
            }
    });
    
    只有Safari有这个问题,一个单一的选择列表可以有两个可见的选择项,这显然是一个bug