ajax实现三级联动

最新推荐文章于 2021-12-31 16:58:27 发布

原创最新推荐文章于 2021-12-31 16:58:27 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #前端 #多级联动

本文介绍了一个基于学年、系、班级的三级联动选择器的实现方法，通过使用Ajax技术动态加载不同级别的选项，实现了良好的用户体验。文章详细展示了如何通过JavaScript和jQuery库来监听选择事件并更新下级选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<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>