若依框架——＞二级联动，添加、修改默认

最新推荐文章于 2025-05-30 02:10:50 发布

AA-鑫

最新推荐文章于 2025-05-30 02:10:50 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ruoyi框架文章标签： java

本文链接：https://blog.youkuaiyun.com/weixin_45853906/article/details/110390147

ruoyi框架专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的年级和班级联动下拉选择框的方法。当用户选择一个年级时，对应的班级列表会根据所选年级动态更新。涉及的技术包括前端HTML、JavaScript以及后端的数据查询。

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

add.html页面

<div class="row">
			<label class="col-xs-2 control-label">年级:</label>
			<div class="col-xs-4">
				<select id="agrade" >
					<option value="">请选择年级</option>
				</select>
			</div>
		</div>
		<div class= " row" >
			<label class="col-xs-2 control-label">班级:</label>
			<div class="col-xs-4">
				<select class="form-control" id="aclasses" name="cid">
					<option value="">请选择班级</option>
				</select>
			</div>
		</div>

$(document).ready(function() {   //页面加载时运行此函数  放在最前端
	/*二级*/
		$.ajax({
			url: ctx + "system/grade/select",
			type: 'GET',
			success: function (data) {
				$("#agrade").empty();
				$("#agrade").append("<option value=''>请选择年级</option>");
				for (var i = 0; i < data.length; i++) {
					$("#agrade").append("<option value='" + data[i].gid + "'>" + data[i].gname + "</option>");
				}
			}
		});
		$("#agrade").change(function () {//同上面一样
			// alert($("#agrade").val())
			$.ajax({
				url: ctx + "system/classes/select",
				type: 'GET',
				data: {
					gid: $("#agrade").val(),
				},
				success:function (data) {
					$("#aclasses").empty();
					$("#aclasses").append("<option value=''>请选择班级</option>");
					for (var i = 0; i < data.length; i++){
						$("#aclasses").append("<option value='" + data[i].cid + "'>" + data[i].cname + "</option>");
					}
				}
			})
		});
	});

GradeController 查询年级的所有返回一个list集合

@GetMapping("/select")
@ResponseBody
public List<GXGrade> select(){
    List<GXGrade> list1 = gradeService.selectGradeList(new GXGrade());
    return  list1;
}

ClassesController 通过班级外键（gid）查找班级名称

@GetMapping("/select")
@ResponseBody
public List<GXClasses> select(Integer gid){
    List<GXClasses> list1 = classesService.selectClassBid1(gid);
    return  list1;
}

ClassesMapper.xml

![在这里插入图片描述](https://img-blog.csdnimg.cn/2020113019201393.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg1MzkwNg==,size_16,color_FFFFFF,t_70)

<!-- 联动 -->
    <select id= "selectClassBid1" parameterType="Integer" resultMap="GXClassesResult">
        <include refid="selectClassesVo" />
        where aclass.gid = #{aclasses.gid}
    </select>

默认修改

StudentController

edit.html页面

<div class="form-group">
                <label class="col-sm-2 control-label is-required">学生年级：</label>
                <div class="col-sm-10">
                    <select id="agrade" class="form-control">
                        <option value="">请选择年级</option>
                        <option th:each="g:${sysGrade}" th:value="${g.gid}" th:text="${g.gname}" th:field="*{gid}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label is-required">学生班级：</label>
                <div class="col-sm-10">
                    <select id="aclasses"  class="form-control" name="cid" >
                        <option value="">请选择班级</option>
                        <option th:each="cl:${sysClasses}" th:value="${cl.cid}" th:text="${cl.cname}" th:field="*{cid}"></option>
                    </select>
                </div>
            </div>

$("#agrade").change(function () {//同上面一样
            $.ajax({
                url: ctx + "system/classes/select",
                type: 'GET',
                data: {
                    gid: $("#agrade").val(),
                },
                success:function (data) {
                    $("#aclasses").empty();
                    $("#aclasses").append("<option value=''>请选择班级</option>");
                    for (var i = 0; i < data.length; i++){
                        $("#aclasses").append("<option value='" + data[i].cid + "'>" + data[i].cname + "</option>");
                    }
                }
            })
    }))