如何解决Java Thymeleaf依赖级联动态下拉选择值为空
使用 Spring 和 Thymeleaf,我成功创建了一个动态下拉列表,该下拉列表依赖于我的用户注册表中的第一个下拉列表。
当我选择第一个列表 Department
时,第二个下拉列表会填充相关部门,我毫无问题地完成了这项工作。问题是当我尝试通过发布注册表将值保存到我的 MysqL 数据库时,第一个下拉值没有任何问题,但第二个(动态)下拉列表显示为 null
。
有人可以帮忙吗?
我的 html 是:
<!DOCTYPE html>
<html xmlns:th="http://thymeLeaf.org">
<head>
<script type="text/javascript">
function random()
{
var a = document.getElementById('countryId').value;
if(a==="IT")
{
var array=["DBA","SYstem","NETWORK"];
}
else if(a==="HR")
{
var array=["TALENT","PAYROLL","Security"];
}
else
{
var array=[];
}
var string="";
for(i=0;i<array.length;i++)
{
string=string+"<option>"+array[i]+"</option>";
}
string="<select name='devision'>"+string+"</select>";
document.getElementById('output').innerHTML=string;
}
</script>
</head>
<body>
<div th:replace="fragments/header :: header"></div>
<div class="container">
<div class="row">
<div class="col-md-10">
<div class="card" style="margin-top: 1.5em;">
<div class="card-header"><h2>Register For An Account</h2></div>
<div class="card-body">
<form action="" method="post" >
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<div class="form-group row">
<label for="name" class="col-lg-2 col-md-3 col-form-label">Name:</label>
<div class="col-lg-10 col-md-9">
<input type="text" class="form-control" th:field="${user.name}"/>
</div>
</div>
<div class="form-group row">
<label for="name" class="col-lg-2 col-md-3 col-form-label">Hire Date:</label>
<div class="col-lg-10 col-md-9">
<input type="date" class="form-control" th:field="${user.hiredate}"/>
</div>
</div>
<div class="form-group row">
<label for="name" class="col-lg-2 col-md-3 col-form-label">User Name:</label>
<div class="col-lg-10 col-md-9">
<input type="text" class="form-control" th:field="${user.username}"/>
</div>
</div>
<div class="form-group row">
<label for="username" class="col-lg-2 col-md-3 col-form-label">Email Address:</label>
<div class="col-lg-10 col-md-9">
<input type="text" class="form-control" th:field="${user.email}"/>
</div>
</div>
<div class="form-group row">
<label for="name" class="col-lg-2 col-md-3 col-form-label">Department:</label>
<div class="col-lg-10 col-md-9">
<select id="countryId" onchange="random()" th:field="*{user.departments}">
<option th:value="''">Select Department</option>
<option th:value="'IT'">IT</option>
<option th:value="'HR'">HR</option>
<option th:value="'Finance'">Finance</option>
</select>
</div>
</div>
<div class="form-group row" id="output">
<label for="name" class="col-lg-2 col-md-3 col-form-label">Devision:</label>
<div class="col-lg-10 col-md-9">
<select id="devision" name="devision" th:field="*{user.devisions}">
<option th:value="''">Select Devision</option>
<option th:value="'Devision'"></option>
</select>
</div>
</div>
<div class="form-group row">
<label for="Password" class="col-lg-2 col-md-3 col-form-label">Password:</label>
<div class="col-lg-10 col-md-9">
<input type="password" class="form-control" th:field="${user.password}"/>
</div>
</div>
<div class="form-group row">
<label for="confirmPassword" class="col-lg-2 col-md-3 col-form-label">Confirm Password:</label>
<div class="col-lg-10 col-md-9">
<input type="password" class="form-control" id="confirmPassword"/>
</div>
</div>
<button type="button" class="btn btn-lg btn-info" id="back">Back</button>
<button type="submit" class="btn btn-lg btn-primary float-right">Create Account</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我的控制器:
@Controller
public class LoginController {
@Autowired
private UserService userService;
@Autowired
private departmentRepository depRepo;
@GetMapping("/login")
public String login() {
return "login";
}
@GetMapping("/register")
public String register(ModelMap model,Department department) {
model.put("user",new User());
List<Department> dep = depRepo.findAll();
model.put("department",dep);
return "register";
}
@PostMapping("/register")
public String registerPost(User user) {
User savedUser = userService.save(user);
return "redirect:/login";
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。