html利用select简单实现结束时间不能大于开始时间下拉选择效果

记录一下要使结束时间不能大于开始时间，并且有级联关系，列如选择了早上八点就只能选择八点以后的时间

根据相关条件从数据库中查询出所有可用存在的时间
一、后端部分

 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>

原文地址：https://www.jb51.cc/wenti/3282718.html