iOS Bug？使用jQuery进行聚焦时,无法更改选择中的文本

Question

我正在使用带有optgroups的select来在移动设备上进行一些导航.我使用optgroup的标签来表示它所属的部分 - 然后选项本身来指定子部分.

问题是,当select不在焦点时,我遇到的几乎所有浏览器都没有显示optgroup.我通过编写以下jQuery解决了这个问题:

$(".Nav-Interior-Mobile select option:selected").each( function() {
    pageGroupLabel = $(this).parent('optgroup').attr('label');
    pageItemLabel = $(this).text();
    $(this).text(pageGroupLabel + " > " + pageItemLabel);
});
$('.Nav-Interior-Mobile select').focus( function() {
    $(this).find('option:selected').text(pageItemLabel); 
});
$('.Nav-Interior-Mobile select').blur( function() {
    $(this).find('option:selected').text(pageGroupLabel + " > " + pageItemLabel); 
});

这似乎适用于除iOS之外的所有内容.在iOS中,更改选择的UI不会反映在焦点上使用的新文本.我可以看到Apple的UI改变之上的实际选择 - 但他们的UI根本没有改变.

任何人都知道如何做到这一点？

这里模糊时工作:

并且在专注时不工作(当它应该只是说"Web"时,他们的UI仍然具有"品牌> Web"):

---

这绝对是一个错误 - 如果你向下滚动然后在列表中备份 - 然后文本被更改 - 奇怪.

Answer 1

尝试使用此处发布的 QuickChange 插件：

在 Mobile Safari 下拉列表项选择框中使用“下一步”时，select/dropdown 的 onchange() JS 事件的奇怪行为

将插件代码粘贴到 Javascript 文件中后，您应该能够将 onfocus 代码替换为：

$('.Nav-Interior-Mobile select').quickChange(function() { 
    $(this).find('option:selected').text(pageItemLabel);
});

并且您现有的 onblur 代码应该继续工作以将值改回。