オプションの非表示/表示は、ブラウザ間で一貫性のない動作をします。簡単な回避策は、非表示/表示の代わりにデタッチ/追加を使用することです。

このアプローチを使用したデモについては、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()については、まったく効果がないように見えました。

そこで私はFiddleを作成し、少し異なる手法を考え出しました。実際には、2 番目の select 要素からすべてのオプションを削除しました。次に、最初の選択が変更されたら、2 番目の選択を空にしてから、必要なオプションを挿入します。

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 のオプションの数を 2 つに減らすと、レベル 6 が正しく機能することがわかります。

要素の元のレンダリングが原因で問題が発生しているようです。@nxt が言うように、良い解決策は、jQuery を使用して要素を動的に追加および削除することです。