La sélection dynamique sur l'iPhone ne fonctionne pas

Question

J'ai deux éléments de sélection. Faire un choix sur la première sélection va construire les options pour la deuxième sélection. Fonctionne très bien sur les navigateurs de bureau.

Sur l'iPhone, après avoir fait votre choix sur le premier et choisi "Suivant", les options ne sont pas remplies dans la deuxième sélection. Jusqu'à présent, la seule façon de le faire est d'aller de la deuxième sélection, de retour à la "précédente" et ensuite de retour, "Suivant" à la deuxième sélection. L'autre façon de cliquer sur "Terminé", puis appuyez sur la deuxième sélection.

J'ai essayé à la fois .change() et .click() et les deux produisent les mêmes résultats.

est inférieure à la JS et est ici un exemple de travail http://damonomania.com/select/

Toutes les suggestions? TIA!

$(document).ready(function(){ 

    $('#select-1').change(function() { 
     show_options(); 
    }); 

    function show_options() { 
     var id = $('#select-1').val(); 
     $('#select-2 option:gt(0)').remove(); 
     $.each(options[id], function(k,v) { 
      $('#select-2').append('<option value="' + k + '">' + v + '</option>'); 
     }); 
    } 
}); 

var options = {"17":{"835":"870","836":"871"},"18":{"435":"870","436":"871"},"13":{"1":"123546"},"19":{"1213":"4010","1206":"4015"}} 

Answer 1

J'ai eu le même problème sur mon site. J'ai été en mesure de résoudre le problème en interrogeant manuellement la propriété selectedIndex sur le contrôle de sélection. De cette façon, il se déclenche dès que vous "vérifiez" l'élément dans la liste. Voici un plugin jQuery je l'ai écrit pour ce faire:

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

Vous l'utilisez comme vous utiliseriez l'événement « changement ». Par exemple:

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

Modifier: Android ne se concentre pas la sélection lorsque vous appuyez sur pour sélectionner une nouvelle valeur, mais il n'a pas non plus le même problème que l'iPhone fait. Donc, corrigez-le en câblant également l'ancien événement change.