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

本文介绍了一个使用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>

js
’

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

js

$("#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>");
                    }
                }
            })
    }))
### 自定义 Uni-app 中 `uni-popup` 弹出层的动画效果 在 Uni-app 开发环境中,对于希望调整 `uni-popup` 组件默认行为的需求,特别是针对其显示和隐藏时的动画效果,可以通过覆盖样式或利用框架提供的钩子函数来实现自定义化。 #### 方法一:通过 CSS 动画类名控制 可以为 `uni-popup` 设置特定的 class 类,在这些类中定义进入和离开时所需的动画。这通常涉及到使用 Vue 的过渡特性[^1]: ```css /* 定义自己的动画 */ .popup-enter-active, .popup-leave-active { transition: all 0.3s ease; } .popup-enter-from, .popup-leave-to /* .fade-leave-active 在低于版本 2.1.8 中 */ { transform: translateY(10px); opacity: 0; } ``` 接着将此 class 应用于 `uni-popup` 标签上: ```html <uni-popup :class="{ 'popup-custom': true }"> </uni-popup> ``` 需要注意的是,上述方法适用于较为简单的场景;如果想要更复杂的交互逻辑,则可能需要考虑第二种方式。 #### 方法二:借助 JavaScript 实现高级定制 当仅靠 CSS 难以满足需求时——比如要创建独特的转场效果或是与其他 UI 元素联动——则可以在打开/关闭弹窗前后执行额外的操作。此时可监听组件事件并调用相应的方法来自定义动画过程[^2]: ```javascript methods: { openPopup() { this.$refs.popup.open({ animationType: 'slide-in-bottom', // 或者其他预设值 duration: 500, beforeEnter(el) { console.log('before enter') }, afterLeave(el) { console.log('after leave') } }); } } ``` 以上两种方案均能有效改变 `uni-popup` 默认的行为模式,开发者可以根据实际项目情况灵活选用适合的方式来进行优化改进。 #### 注意事项 由于不同平台渲染机制差异较大,某些情况下可能会遇到兼容性问题。因此建议测试阶段充分验证各端表现一致性,并参照官方文档及时更新解决方案[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值