La deuxième liste déroulante n'apparaît pas immédiatement

Question

J'ai deux menus déroulants, le second menu déroulant apparaît en fonction de ce qui est sélectionné dans le premier menu déroulant. Le problème est que dans certains navigateurs, si quelque chose est sélectionné dans le premier menu déroulant, alors si je clique sur le second menu déroulant alors une liste déroulante ne se produit pas, mais si je sélectionne quelque chose dans le premier menu déroulant puis cliquez sur le second menu déroulant, puis la liste déroulante apparaît dans le second menu déroulant. Pourquoi cela arrive-t-il?

Dans Internet Explorer, Firefox et Safari, mon deuxième menu déroulant apparaît tout de suite lorsque je clique dessus après avoir sélectionné quelque chose dans le premier menu déroulant pour la première fois. Dans google chrome et l'opéra, je dois sélectionner des options dans le premier menu déroulant deux fois pour pouvoir faire fonctionner le second menu déroulant.

Le code jquery pour le second menu déroulant est ci-dessous:

var OptDrop = new Array(); 

    OptDrop.abc = ["",1,2]; 
    OptDrop.abcd = ["",1,2,3]; 
    OptDrop.abcde = ["",1,2,3,4]; 
    OptDrop.trueorfalse = [1]; 
    OptDrop.yesorno = [1]; 

    $("#optionDropId").change(function(){ 
     var selectedValue = $(this).val(); 
     $("#numberDropId").html(""); 
     $.each(OptDrop[selectedValue], function(x,y){ 
      $("#numberDropId").append($("<option></option>").attr("value", y).html(y)); 
     }); 
}); 

Le code complet est en jsFiddle. here (le code complet pourrait ne pas fonctionner pleinement jsFiddle mais il fonctionne dans les navigateurs sur son propre fichier et le code complet montre l'ordre de mon code

Mise à jour du code.

Ce que j'ai mis dans mon Code;

$("#optionDropId").change(function(){ 
    var selectedValue = $(this).val(); 
    $("#numberDropId").html(""); 
    $.each(OptDrop[selectedValue], function(x,y){ 
     $("#numberDropId").append($("<option></option>").attr("value", y).html(y)); 
    }); 

}); 

$(document).ready(function(){ 
    $("#optionDropId").change(); 
}); 
// this does not allow the second dropdown to work, I tried moving this code around but can't get dropdown to work when including this code 

Answer 1

l'événement .Modification jquery n'est pas tiré sur pageload car elle repose sur des événements javascript sous-jacents et la sélection de la première option dans une liste pageload n'est pas une sélection javascript, son comportement par défaut

.

$(document).ready(function(){ 
    $("#optionDropId").change(); 
}); 

qui devrait déclencher les .changeevents que vous avez attribué, assurez-vous de l'appeler après votre bloc d'affectation de .Modification