Manejo de opciones HTML SELECT con delegación de eventos a javascript en iPhone Safari

Question

Estamos desarrollando una aplicación web con GUI personalizada para usar en iPhone. Una página de la aplicación tiene 3 listas desplegables SELECT posteriores, donde la selección de una opción del primer menú desplegable deriva las opciones para el segundo menú desplegable, y así sucesivamente. Las siguientes opciones desplegables están llenas de javascript basado en el evento onchange en el menú desplegable anterior. El problema es que, en iPhone, las opciones para un SELECCIONAR aparecen con los enlaces 'prev' y 'siguiente' para pasar al control anterior y siguiente. Cuando se hace clic en el enlace 'siguiente', el control pasa al siguiente SELECCIONAR y muestra las opciones. El javascript se desencadena por el evento onchange para SELECT anterior y rellena las opciones para el próximo SELECT. Pero en el menú desplegable para 2nd SELECT, se muestran las opciones anteriores antes de que se vuelva a llenar con javascript. ¿Hay alguna solución o evento que pueda secuenciar la ejecución de javascript y luego seleccionar el siguiente control? ¿Hay algún evento que pueda activarse cuando se selecciona una opción SELECCIONAR y antes de que el control abandone el elemento SELECCIONAR? ¿Hay un identificador para los enlaces Siguiente y Anterior para la visualización de la opción desplegable SELECT?

Answer 1

Tal vez usted podría utilizar el evento de foco, en jQuery esto sería:

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

Aunque la verdadera pregunta es cuando la sobrecarga de iPhone llega, y cuando el evento de ser despedido. Y también se pueden cambiar las opciones de selección en esta vista.

Answer 2

Tuve el mismo problema en mi sitio. Pude solucionarlo consultando manualmente la propiedad selectedIndex en el control de selección. De esta forma, se activará tan pronto como "verifique" el elemento en la lista. Aquí es un plugin de jQuery que escribí para hacer esto:

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

Se utiliza al igual que lo haría con el evento "cambio". Por ejemplo:

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

Editar: Android no enfocar la selección cuando se toca para seleccionar un nuevo valor, pero también no tiene el mismo problema que hace iPhone. Así que corrige al cablear también el antiguo evento change.