'next' in the dropdown on iPhone Safari do

问题:

I am trying to do a straight forward cascading dropdown for mobile safari. I have this working 100% in safari itself, which shows normal style drop downs. But mobile safari dropdowns have a 'next' button.

Hitting this next button takes you to the next drop down in the cascade with triggering onchange() - thus the next dropdown is empty.

The user is forced to press 'done' to trigger on change, then click on the next dropdown.

Does anyone know a way around this. Or what DOM event is triggered by mobile safari's''next'?

回答1:

Disabling the second drop down from the beginning is the only work around I have found so far! it will disable the "next" button on iphones

Add the disabled attr (disabled="disabled") to you select and use javascript or jQuery to enable or disable.

here is the jQuery code

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

here is a live example that is doing this

using jQuery: http://www.imotors.com/mobile

回答2:

That's an iOS native overlay, so what you'll get is a blur event when that overlay comes up. Try using the blur event and see how that works.

回答3:

I have tried many direct solutions to solve this problem with no success. The second pulldown is populated after Safari Mobile's "form assistant" overlay comes up with the spinner (called a "picker" in documentation - http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html), comes up. So the picker is populated with old values.

In another case, if the second cascading pulldown is inactive, the Next button of the form assistant skips right over it. In that scenario, though, once the following form element is landed on, the second pulldown does update itself correctly, so tapping "previous" at that point gives the correct list in the picker.

My "answer" is that Apple is suggesting that JavaScript based cascading pulldowns should not be used but that another UX is to be implemented though I have found nothing that describes this aside from the standard jQuery Mobile type paging menus.