Question

我有两个下拉菜单，根据第一个下拉菜单中选择的内容显示第二个下拉菜单。问题是在某些浏览器中，如果在第一个下拉菜单中选择了某些内容，那么如果我点击第二个下拉菜单，则不会出现下拉列表，但如果我再次在第一个下拉菜单中选择了某个内容，然后单击第二个下拉菜单，然后在第二个下拉菜单中显示下拉列表。为什么会这样？

在Internet Explorer，Firefox和Safari中，当我第一次在第一个下拉菜单中选择某些内容后点击它时，我的第二个下拉菜单会立即出现。

在Google Chrome和Opera中，我必须从第一个下拉菜单中选择两次选项才能让第二个下拉菜单正常工作。

第二个下拉菜单的jquery代码如下：

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

完整的代码在Jsfiddle中。 here（完整代码可能无法在JSfiddle中完全运行，但它可以在浏览器中使用自己的文件，完整代码显示我的代码顺序。

更新代码：

我在代码中添加了什么;

$("#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

jquery .change事件不会在pageload上触发，因为它依赖于底层的javascript事件，并且在pageload列表中选择第一个选项不是javascript选择，它是默认行为。

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

那应该触发你指定的.changeevents，一定要在.change赋值块之后调用它。

第二次下拉并没有立即出现

1 个答案: