Second dropdown menu is not appearing

[carlbrooks]

I have a two dropdown menus, the second drop down menu appears depending on what is selected in the first dropdown menu. Problem is that in some browsers, if something is selected in the first dropdown menu, then if I click on the second dropdown menu then a dropdown does not occur, but if I select something in the first dropdown menu again and then click on the second dropdown menu, then the dropdown appears in the second dropdown menu. Why is this happening?

In Internet Explorer, Firefox and Safari, my second drop down menu appears straight away when I click on it after selecting something on the first dropdown menu for the first time.

In google chrome and opera, I have to select options from the first dropdown menu twice to be able to get the second dropdown menu working.

The jquery code for the second dropdown menu is below:

$("#optionDropId").change(function(){
	
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];

var selectedValue = $(this).val();

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

The full code is in Jsfiddle. (the full code might not work fully in JSfiddle but it works in browsers on its own file and the full code shows the order of my code.

[1]: http://jsfiddle.net/XZ7um/2/