【发布时间】：2021-06-30 20:09:18
【问题描述】：
我使用 Spring Boot 创建了带有文本字段、单选按钮、复选框和下拉列表的 html 表单。在我以 html 表单输入所有值之后，当我单击提交按钮时，所有值都保存到表中，但只有下拉值没有保存到表中，我使用 html 中的一些 JavaScript 代码创建了下拉列表。谁能给我一个解决这个问题的方法？
- HTML.Form（这是我的 html 表单）
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Employee Management System</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Employee Management System</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" th:href="@{/employees}">Employee Management</a>
</li>
</ul>
</div>
</nav>
<br>
<br>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 container justify-content-center-center card">
<h1 class="text-center"> Create New Employee </h1>
<div class="card-body">
<form th:action="@{/employees}" th:object="${employee}" method="POST">
<div class="form-group">
<label> Employee First Name </label>
<input type="text" name="firstName" th:field="*{firstName}" class="form-control" placeholder="Enter Employee First Name" />
</div>
<div class="form-group">
<label> Employee Last Name </label>
<input type="text" name="LastName" th:field="*{LastName}" class="form-control" placeholder="Enter Employee Last Name" />
</div>
<div class="form-group">
<label> Employee Email </label>
<input type="text" name="email" th:field="*{email}" class="form-control" placeholder="Enter Employee Email" />
</div>
<div class="form-group">
<label> Employee Skill </label> <br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<input type="checkbox" th:field="*{skill}" class="selectOne" name="skill" value="Java" />Java <br>
<input type="checkbox" th:field="*{skill}" class="selectOne" name="skill" value="Python" />Python <br>
<input type="checkbox" th:field="*{skill}" class="selectOne" name="skill" value=".Net" />.Net <br>
<input type="checkbox" th:field="*{skill}" class="selectOne" name="skill" value="Kotlin" />Kotlin <br>
<input type="checkbox" th:field="*{skill}" class="selectOne" name="skill" value="C" />C <br>
<input type="checkbox" th:field="*{skill}" class="selectOne" name="skill" value="Ruby" />Ruby <br>
<script type="text/javascript">
$('.selectOne').on('change', function() {
$('.selectOne').not(this).prop('checked', false);
});
</script>
</div>
<div class="form-group">
<label> Employee Gender </label>
<input type="radio" th:field="*{gender}" name="gender" value="Male" />Male
<input type="radio" th:field="*{gender}" name="gender" value="Female" />Female
</div>
<div class="form-group">
<label> Employee Married? </label>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<input type="checkbox" th:field="*{marriage}" class="selectOnly" name="marriage" value="Married" />Married
<input type="checkbox" th:field="*{marriage}" class="selectOnly" name="marriage" value="Un-Married" />Un-Married
<script type="text/javascript">
$('.selectOnly').on('change', function() {
$('.selectOnly').not(this).prop('checked', false);
});
</script>
</div>
<div class="form-group">
<label> Employee Birthday </label>
<input type="date" th:field="*{birthday}" name="birthday" />
</div>
<div class="form-group">
<label> Employee Works at </label>
<select class="form-control" name="select1" id="select1">
<option>--SELECT COMAPNY--</option>
<option th:field="*{workat}" value="1">NIC</option>
<option th:field="*{workat}" value="2">Wipro</option>
</select>
</div>
<div class="form-group">
<select class="form-control" name="select2" , id="select2">
<option>--SELECT DEPARTMENT--</option>
<option th:field="*{workat}" value="1">Dep-01</option>
<option th:field="*{workat}" value="1">Dep-02</option>
<option th:field="*{workat}" value="1">Dep-03</option>
<option th:field="*{workat}" value="2">Dep-04</option>
<option th:field="*{workat}" value="2">Dep-05</option>
</select>
</div>
<script type="text/javascript">
var $select1 = $('#select1'),
$select2 = $('#select2'),
$options = $select2.find('option');
$select1.on('change', function() {
$select2.html($options.filter('[value="' + this.value + '"]'));
}).trigger('change');
</script>
<div class="box-footer">
<button type="submit" class="btn btn-primary">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>【问题讨论】：
-
你是说db表还是html表？
-
我想将信息保存在 html 表和数据库表中（我在上面的代码中使用了 Mysql 数据库）。 @deepakchethan
标签： javascript java html spring-boot