Umgang mit HTML SELECT Optionen mit Ereignisdelegierung zu Javascript auf dem iPhone Safari

Question

Wir entwickeln eine Webanwendung mit GUI, die für die Verwendung auf dem iPhone angepasst wurde. Eine Seite in der App hat 3 aufeinander folgende SELECT-Dropdown-Felder, wobei die Auswahl einer Option aus dem ersten Dropdown-Menü die Optionen für das zweite Dropdown-Feld usw. abruft. Die folgenden Drop-down-Optionen werden von JavaScript auf Basis des Onchange-Ereignisses im vorherigen Dropdown-Menü aufgefüllt. Das Problem ist, dass auf dem iPhone die Optionen für eine SELECT mit 'prev' und 'next' Links angezeigt werden, um zum vorherigen und nächsten Steuerelement zu wechseln. Wenn auf den Link 'Weiter' geklickt wird, geht das Steuerelement zum nächsten SELECT und zeigt die Optionen an. Das JavaScript wird durch das Ereignis onchange für das vorherige SELECT ausgelöst und füllt die Optionen für das nächste SELECT. Aber im Drop-down für 2. SELECT werden die vorherigen Optionen angezeigt, bevor sie vom Javascript neu gefüllt werden. Gibt es eine Problemumgehung oder ein Ereignis, das die Ausführung von Javascript und dann die Auswahl des nächsten Steuerelements sequenzieren kann? Gibt es ein Ereignis, das ausgelöst werden kann, wenn eine SELECT-Option ausgewählt wird und bevor die Steuerung das SELECT-Element verlässt? Gibt es ein Handle für Next und Previous Links für die SELECT Dropdown-Optionsanzeige?

Answer 1

Vielleicht könnten Sie das Fokus-Ereignis verwenden, in jQuery dies wäre:

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

Obwohl die eigentliche Frage ist, wenn das iPhone Überlastung kommt, und wenn das Ereignis gefeuert. Außerdem können die Auswahloptionen in dieser Ansicht geändert werden.

Answer 2

Ich hatte das gleiche Problem auf meiner Website. Ich konnte es beheben, indem ich manuell die Eigenschaft auf dem Auswahlsteuerelement abfragte. So wird es ausgelöst, sobald Sie den Eintrag in der Liste "überprüfen". Hier ist ein jQuery-Plugin Ich schrieb dies zu tun:

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

Sie es verwenden, wie Sie die „change“ -Ereignis verwenden würde. Zum Beispiel:

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

bearbeiten: Android konzentriert sich nicht das wählen, wenn Sie es tippen Sie einen neuen Wert zu wählen, aber es hat auch nicht das gleiche Problem, das iphone tut. Also reparieren Sie es, indem Sie auch das alte change-Ereignis verdrahten.