iPhone Safari下拉列表中的“下一步”不会触发更改事件

Question

我正在尝试为手机游戏做一个直接的级联下拉菜单。我有这个100％在safari本身工作，显示正常的样式下降。但移动野生动物园下拉菜单有一个“下一步”按钮。

点击下一个按钮会带您进入级联中的下一个下拉列表并触发onchange（） - 因此下一个下拉列表为空。

用户被迫按“完成”以触发更改，然后单击下一个下拉列表。

有没有人知道解决这个问题的方法。或者什么DOM事件是由移动safari的''下一步'触发的？

Answer 1

从头开始禁用第二次下拉是迄今为止我发现的唯一工作！它将禁用iphone上的“下一步”按钮

添加禁用的attr（disabled =“disabled”）给你选择并使用javascript或jQuery来启用或禁用。

这里是jQuery代码

$(".DD1").focus(function() {
    $('.DD2').attr('disabled', 'disabled');
}).blur(function() {
    $('.DD2').removeAttr('disabled');
});

这是一个正在执行此操作的实例

使用jQuery：  http://www.imotors.com/mobile

Answer 2

这是一个iOS原生叠加层，所以当叠加层出现时，你会得到一个模糊事件。尝试使用模糊事件，看看它是如何工作的。

Answer 3

我尝试了许多直接的解决方案来解决这个问题但没有成功。第二个下拉列表填充 后，Safari Mobile的“表单助手”叠加层出现了微调器（在文档中称为“选取器” - http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html），然后出现。所以选择器填充了旧值。

在另一种情况下，如果第二个级联下拉菜单处于非活动状态，则表单助手的“下一步”按钮会在其上方跳过。但是，在这种情况下，一旦下面的表单元素登陆，第二个下拉列表会自动更新，因此在该点点击“previous”会在选择器中显示正确的列表。

我的“回答”是Apple建议不应该使用基于JavaScript的级联下拉，但是要实现另一个UX，尽管除了标准的jQuery Mobile类型的分页菜单之外我没有发现任何描述这一点的内容。