ajax实现三级联动

一个基于学年、系、班级的三级联动

<label > 学年：</label>
    <select id="semester">
    </select>
    <label >系别：</label>
    <select id="major">  
    </select>
    <label > 班级：</label>
    <select id="class">
    </select>

<script>
    $(function() {
        $.ajax({
            type: "POST",
            cache: false,
            url: "<%=basePath%>/basic/findall.do",
            data: {"pid": 0},
            dataType: "json",
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    $("#semester").append("<option value='" + data[i].seid + "'>" + data[i].sename + "</option>");
                }
            }
        });
        $("#semester").change(function(){
            var seid=$(this).val();
            $.ajax({
                type:"POST",
                cache:false,
                url:"<%=basePath%>/basic/findmaall.do",
                data:{"seid":seid},
                dataType:"json",
                success:function(data){
                    //追加option前，先清除major和class的option，以免重选时干扰
                    $("#major option").remove();
                    $("#class option").remove();
                    for (var i = 0; i < data.length; i++) {
                        $("#major").append("<option value='" + data[i].maid + "'>" + data[i].maname + "</option>");
                    }
                }
            });
        });
        $("#major").change(function(){
            var maid=$(this).val();
            console.log(maid);
            $.ajax({
                type:"POST",
                cache:false,
                url:"<%=basePath%>/basic/findciall.do",
                data:{"maid":maid},
                dataType:"json",
                success:function(data){
                    //追加option前，先清除class的option，以免重选时干扰
                    $("#class option").remove();
                    for (var i = 0; i < data.length; i++) {
                        $("#class").append("<option value='" + data[i].cid + "'>" + data[i].cname + "</option>");
                    }
                }
            });
        });
    });

</script>