jsp+servlet+mybatis3 添加学生信息20分如图所示：两个下拉列表显示宿舍信息实现二级联动10分第一个下拉列表分为男女信息 第二个下拉显示对应性别并且有空余床位的宿舍10分注意：当添加学生信息的时候添加男生则选择第一个下拉为男第二个下拉为所有的有剩余床位的男生宿舍的信息选择后添加到学生表中对应的宿舍剩余床位减少。代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加学生信息</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 获取宿舍信息
$.ajax({
url: "getDormitoryInfo.action",
type: "GET",
dataType: "json",
success: function(data){
// 填充第一个下拉列表
var dormitorySelect = $("#dormitorySelect");
for(var i=0; i<data.length; i++){
var option = $("<option>").val(data[i].id).text(data[i].name);
dormitorySelect.append(option);
}
}
});
<pre><code> // 根据性别选择宿舍
$("#genderSelect").change(function(){
var gender = $(this).val();
var dormitorySelect = $("#dormitorySelect");
dormitorySelect.empty();
if(gender != ''){
// 获取对应性别并且有空余床位的宿舍信息
$.ajax({
url: "getDormitoryByGender.action",
type: "GET",
data: {gender: gender},
dataType: "json",
success: function(data){
// 填充第二个下拉列表
for(var i=0; i<data.length; i++){
var option = $("<option>").val(data[i].id).text(data[i].name);
dormitorySelect.append(option);
}
}
});
}
});
// 添加学生信息
$("#addStudentBtn").click(function(){
var gender = $("#genderSelect").val();
var dormitoryId = $("#dormitorySelect").val();
if(gender == '' || dormitoryId == ''){
alert("请选择性别和宿舍");
return;
}
// 添加学生信息
$.ajax({
url: "addStudent.action",
type: "POST",
data: {gender: gender, dormitoryId: dormitoryId},
dataType: "json",
success: function(data){
if(data.success){
alert("添加成功");
// 更新宿舍剩余床位
$.ajax({
url: "updateDormitoryBeds.action",
type: "POST",
data: {dormitoryId: dormitoryId},
dataType: "json",
success: function(data){
if(data.success){
alert("宿舍床位更新成功");
}else{
alert("宿舍床位更新失败");
}
}
});
}else{
alert("添加失败");
}
}
});
});
});
</script>
</code></pre>
</head>
<body>
<h2>添加学生信息</h2>
<div>
<label for="genderSelect">性别：</label>
<select id="genderSelect">
<option value="">请选择</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div>
<label for="dormitorySelect">宿舍：</label>
<select id="dormitorySelect"></select>
</div>
<button id="addStudentBtn">添加学生</button>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/ioRa 著作权归作者所有。请勿转载和采集!