jquery - iOS 错误？使用 jQuery 聚焦时无法更改选择中的文本

Question

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

问题是，在我遇到的几乎所有浏览器中，当选择不处于焦点时，都不会显示 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 不会反射(reflect)焦点上使用的新文本。我可以看到 Apple 的 UI 上方的实际选择发生了变化 - 但他们的 UI 根本没有改变。

有人知道如何做到这一点吗？

这里它在模糊时工作:

并且在专注时无法工作(他们的 UI 仍然有“品牌> Web”，而它应该只是说“Web”):

<小时/>

这绝对是一个错误 - 如果您向下滚动然后在列表中返回 - 文本就会更改 - 很奇怪。

Answer 1

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

Strange behavior of select/dropdown's onchange() JS event when using 'Next' on Mobile Safari Dropdown list item select box

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

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

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