选项的隐藏/显示在浏览器中的行为不一致。一个简单的解决方法是使用分离/附加而不是隐藏/显示。

有关使用该方法的演示，请参见：http: //jsfiddle.net/BRTpN/1/

$.fn.linkToSelect= function(target) {
    target = $(target);
    //find all options in the target dropdown
    var options = target.find("option");
    //hide all except for the first
    options.filter(":gt(0)").detach();


    //listen for changes on the source select
    this.bind('change', function() {
        //get the selected value
        var value = $(this).val();
        //extract the level number
        value = /[0-9]+/.exec(value);
        if(value) {
            value = value[0];
        }
        //hide all target options except for the first
        options.filter(":gt(0)").detach();
        target.val('choosecourse');
        if(value || value === '0') {
            //reset the selected value 
            target.val('choosecourse');
            //show the once we want to keep:
            var classSelector = ".l"+ value + "workshopmods";
            options.filter(classSelector).appendTo(target);                       
        }        
    });
};
$("#workshopcourseselect").linkToSelect("#workshopmoduleselect");

​

实际上，我根本无法在 Chrome/MacOS X 上使用 hide()它。show()对于选项似乎没有任何效果。

所以我做了一个小提琴并想出了一个稍微不同的技术。我实际上从第二个选择元素中删除了所有选项。然后当第一个选择发生变化时，我清空第二个选择中的任何内容，然后插入我们想要的选项：

var l4 = $("#workshopmoduleselect .l4workshopmods").detach();
var l5 = $("#workshopmoduleselect .l5workshopmods").detach();
var l6 = $("#workshopmoduleselect .l6workshopmods").detach();
var def = $("#workshopmoduleselect option"); // everything else.  Don't detach.

$('#workshopcourseselect').change(function() {
    var level = $(this).val();
    var menu = $('#workshopmoduleselect');

    menu.empty();
    if (level == "level4")
        menu.append(l4);
    else if (level == "level5")
        menu.append(l5);
    else if (level == "level6")
        menu.append(l6);
    else
        menu.append(def);
});​

这发生在你身上，因为最初你有一个非常大的select元素，有很多选择。

如果您将级别 5 的选项数量减少到一对，您将看到级别 6 可以正常工作。

由于元素的原始渲染，您的问题似乎正在发生。就像@nxt 所说，一个好的解决方案是使用 jQuery 动态添加和删除元素。