Obsługa HTML SELECT Opcje z delegowaniem zdarzeń do javascript na iPhonie Safari

Question

Rozwijamy aplikację internetową z interfejsem GUI dostosowanym do używania na telefonie iPhone. Strona w aplikacji ma 3 kolejne listy rozwijane SELECT, gdzie wybór opcji z 1. listy rozwijanej powoduje wybranie opcji dla drugiego menu rozwijanego i tak dalej. Kolejne opcje rozwijane są zapełniane przez javascript na podstawie zdarzenia onchange w poprzednim menu rozwijanym. Problem polega na tym, że na iPhonie pojawiają się opcje SELECT z linkami "prev" i "next", aby przejść do poprzedniej i następnej kontrolki. Po kliknięciu linku "następny", sterowanie przechodzi do następnego WYBORU i wyświetla opcje. Język javascript jest wywoływany przez zdarzenie onchange dla poprzedniego SELECT i zapełnia opcje następnego SELECT. Ale na liście rozwijanej dla 2nd SELECT wyświetla poprzednie opcje, zanim zostanie ponownie zapełniony przez javascript. Czy istnieje obejście lub zdarzenie, które może sekwencyjnie wykonać javascript, a następnie wybrać następną kontrolę? Czy istnieje jakieś zdarzenie, które może zostać wywołane, gdy wybrana jest opcja SELECT, a przed kontrolą opuszcza element SELECT? Czy istnieje uchwyt dla następnych i poprzednich linków do wyświetlania opcji rozwijanej SELECT?

Answer 1

Być może można użyć zdarzenia ostrości, w jQuery to byłoby:

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

Chociaż prawdziwym pytaniem jest, gdy przeciążenie iPhone przychodzi, a kiedy zdarzenie się zwolniony. Ponadto można zmienić wybrane opcje w tym widoku.

Answer 2

Miałem ten sam problem na mojej stronie. Udało mi się to naprawić, ręcznie odpytując właściwość selectedIndex na formancie wyboru. W ten sposób odpala, gdy tylko "sprawdzisz" pozycję na liście. Oto wtyczka jQuery, którą napisałem, aby to zrobić:

$.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) 
    }); 
}; 

Używasz go tak, jak byś użył wydarzenia "zmień". Na przykład:

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

Edycja: Android nie skupia select po dotknięciu go, aby wybrać nową wartość, ale to też nie ma ten sam problem, że iPhone ma. Napraw go, podłączając również stare zdarzenie change.