Обработка параметров HTML SELECT с делегированием события в javascript на iPhone Safari

Question

Мы разрабатываем веб-приложение с графическим интерфейсом, настроенным для использования на iPhone.На странице приложения есть 3 последовательных выпадающих списка, в которых при выборе опции из первого раскрывающегося списка выводятся параметры для второго раскрывающегося списка и т. Д.Последующие параметры раскрывающегося списка заполняются JavaScript, основываясь на событии onchange предыдущего раскрывающегося списка.Проблема в том, что на iPhone появляются опции для SELECT со ссылками «предыдущая» и «следующая» для перехода к предыдущему и следующему элементу управления.При щелчке по ссылке «следующий» элемент управления переходит к следующему элементу SELECT и отображает параметры.JavaScript запускается событием onchange для предыдущего SELECT и заполняет параметры для следующего SELECT.Но в раскрывающемся списке 2-й SELECT отображает предыдущие параметры, прежде чем он будет заполнен JavaScript.Есть ли обходной путь или событие, которое может упорядочить выполнение JavaScript и затем выбор следующего элемента управления?Есть ли какое-либо событие, которое может быть вызвано, когда выбрана опция SELECT и до того, как элемент управления покидает элемент SELECT?Есть ли дескриптор для ссылок «Следующая» и «Предыдущая» для отображения раскрывающегося списка «ВЫБОР»?

Answer 1

Может быть, вы могли бы использовать событие фокуса, в jQuery это будет:

$('#select2').focus(function () {
    // update select2's elements
});

Хотя реальный вопрос заключается в том, когда возникает перегрузка iPhone и когда срабатывает событие. А также можно изменить параметры выбора в этом представлении.

Answer 2

У меня была такая же проблема на моем сайте.Мне удалось это исправить, вручную опрашивая свойство selectedIndex в элементе управления select.Таким образом, он срабатывает, как только вы «проверяете» элемент в списке.Вот плагин jQuery, который я написал для этого:

$.fn.quickChange = function(handler) {
    return this.each(function() {
        var self = this;
        self.qcindex = self.selectedIndex;
        var interval;
        function handleChange() {
            if (self.selectedIndex != self.qcindex) {
                self.qcindex = self.selectedIndex;
                handler.apply(self);
            }
        }
        $(self).focus(function() {
            interval = setInterval(handleChange, 100);
        }).blur(function() { window.clearInterval(interval); })
        .change(handleChange); //also wire the change event in case the interval technique isn't supported (chrome on android)
    });
};

Вы используете его так же, как и событие "change".Например:

$("#mySelect1").quickChange(function() { 
    var currVal = $(this).val();
    //populate mySelect2
});

Редактировать : Android не фокусирует выделение при нажатии на него, чтобы выбрать новое значение, но также не имеет той же проблемы, что и iphone.Так что исправьте это, подключив старое событие change.