'next' in the dropdown on iPhone Safari does not trigger on change event

Question

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'?

Answer 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