记录一下要使结束时间不能大于开始时间,并且有级联关系,列如选择了早上八点就只能选择八点以后的时间
public ModelMap geInfo(ModelMap mmap){
// 时间
List<Time> timeList = Service.selectTimeList(Time);
mmap.put("timeList", timeList);
return mmap;
}
二、前端代码
<div class="row">
<div class="col-sm-11">
<div class="form-group">
<label class="col-sm-3 control-label is-required">预约开始时间:</label>
<div class="col-sm-8">
<select id="startId" name="startId" class="form-control" onchange="checkTimeId()" required>
<option value="">请选择</option>
<option th:each="list:${timeList}" th:value="${list.id}" th:text="${list.timeName +':00'}" th:selected="${list.id == timeId}"></option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-11">
<div class="form-group">
<label class="col-sm-3 control-label">预约结束时间:</label>
<div class="col-sm-8">
<select id="stopTimeId" name="stopTimeId" class="form-control">
</select>
</div>
</div>
</div>
</div>
三、js简单实现时间的时分秒的级联选择
<script th:inline="javascript">
var timeList = [[${timeList}]];
$(document).ready(function () {
checkTimeId();
});
function checkTimeId(){
let timeId = $("#startId").val();
$("#stopTimeId").empty();
$("#stopTimeId").append("<option value=''>请选择</option>");
for (let i = 0; i < timeList.length; i++) {
if(timeList[i].id >= startId){
let selected ="";
if(timeId == timeList[i].id){
selected ="selected";
}
$("#stopTimeId").append("<option value='"+timeList[i].id+"' "+selected+">"+timeList[i].timeName+":00</option>");
}
}
}
</script>