Jquery HTML-根据时间更改小时下拉列表

因此，我有两个下拉列表，如下所示：

第一个基于开始时间：

<select class="form-control" type="time" name="starttime" id="starttime" value="">
    <option value="" disabled selected hidden>Start time</option>
    <option value="00:10:00">10:00am</option>
    <option value="00:11:00">11:00am</option>
    <option value="00:12:00">12:00pm</option>
    <option value="00:13:00">1:00pm</option>
    <option value="00:14:00">2:00pm</option>
    <option value="00:15:00">3:00pm</option>
    <option value="00:16:00">4:00pm</option>
    <option value="00:17:00">5:00pm</option>
    <option value="00:18:00">6:00pm</option>
</select>

开始时间
上午10:00
上午11:00
下午12:00
下午1:00
下午2:00
下午三点
下午四点
下午五点
下午六点

第二个基于从开始时间算起的小时数：

<select class="form-control" name="sessions.0.hours" id="hours" label="No. of Hours">
    <option value="" disabled selected hidden>Hours</option>
    <option value="4">4 hours</option>
    <option value="5">5 hours</option>
    <option value="6">6 hours</option>
    <option value="7">7 hours</option>
    <option value="8">8 hours</option>
    <option value="9">9 hours</option>
    <option value="10">10 hours</option>
    <option value="11">11 hours</option>
    <option value="12">12 hours</option>
</select>

小时
4小时
5小时
6小时
7小时
8小时
9小时
10小时
11小时
12小时

我希望第二个下拉列表根据选择的开始时间进行更改，以便开始时间后的小时数不会超过关闭时间（晚上10点）。示例：

• 上午10点启动允许您选择从最小（4小时）到最大（12小时）的任意小时数

• 下午4点开始允许您选择从最小（4小时）到6小时的小时数

---

我希望这能对您有所帮助
HTML

开始时间
上午10:00
上午11:00
下午12:00
下午1:00
下午2:00
下午三点
下午四点
下午五点
下午六点
小时

jsjquery

function selectStartTime(val){
 switch(val){
  case "00:10:00":
   hoursAvailable(10);
   break;
  case "00:11:00":
   hoursAvailable(11);
   break;
  case "00:12:00":
   hoursAvailable(12);
   break;
  case "00:13:00":
   hoursAvailable(13);
   break;
  case "00:14:00":
   hoursAvailable(14);
   break;
   case "00:15:00":
   hoursAvailable(15);
   break;
   case "00:16:00":
   hoursAvailable(16);
   break;
   case "00:17:00":
   hoursAvailable(17);
   break;
   case "00:18:00":
   hoursAvailable(18);
   break;
  default:
   console.log("default");
 };
};

var CLOSINGTIME = 22;

function hoursAvailable(startTimeInt){
  var diff = CLOSINGTIME - startTimeInt;
  var options = "<option value='' disabled selected hidden>Hours</option>";
  var hour = 4;
  for (i = 0; i < diff-3; i++) { 
    options += "<option value="+hour+">"+hour+" hours</option>";
    hour++;
  };

  $("select#hours").html(options);
};

$("select#starttime").on("change", function(){
  selectStartTime(this.value);
});

功能选择开始时间（val）{
开关（val）{
案例“00:10:00”：
可用时数（10）；
打破
案例“00:11:00”：
可用时数（11）；
打破
案例“00:12:00”：
可用小时数（12）；
打破
案例“00:13:00”：
可用时数（13）；
打破
案例“00:14:00”：
可用时数（14）；
打破
案例“00:15:00”：
可用时数（15）；
打破
案例“00:16:00”：
可用时数（16）；
打破
案例“00:17:00”：
可用时数（17）；
打破
案例“00:18:00”：
可用时数（18）；
打破
违约：
console.log（“默认”）；
};
};
var-CLOSINGTIME=22；
可用功能小时数（开始时间）{
var diff=关闭时间-开始时间；
var options=“小时”；
var小时=4；
对于（i=0；i

html

<select class='form-control', type="time" name="starttime" id="starttime" value="" onchange="myfunction(this)">
                            <option value="" disabled selected hidden>Start time</option>
                            <option value="00:10:00">10:00am</option>
                            <option value="00:11:00">11:00am</option>
                            <option value="00:12:00">12:00pm</option>
                            <option value="00:13:00">1:00pm</option>
                            <option value="00:14:00">2:00pm</option>
                            <option value="00:15:00">3:00pm</option>
                            <option value="00:16:00">4:00pm</option>
                            <option value="00:17:00">5:00pm</option>
                            <option value="00:18:00">6:00pm</option>
                          </select>


<select class="form-control" name="sessions.0.hours" id="hours" label="No. of Hours">
                           <option value="" disabled selected hidden>Hours</option>
                           <option value="4">4 hours</option>
                           <option value="5">5 hours</option>
                           <option value="6">6 hours</option>
                           <option value="7">7 hours</option>
                           <option value="8">8 hours</option>
                           <option value="9">9 hours</option>
                           <option value="10">10 hours</option>
                           <option value="11">11 hours</option>
                           <option value="12">12 hours</option>
                         </select>

<select class='form-control', type="time" name="starttime" id="starttime" value="" onchange="myfunction(this)">
                            <option value="" disabled selected hidden>Start time</option>
                            <option value="00:10:00">10:00am</option>
                            <option value="00:11:00">11:00am</option>
                            <option value="00:12:00">12:00pm</option>
                            <option value="00:13:00">1:00pm</option>
                            <option value="00:14:00">2:00pm</option>
                            <option value="00:15:00">3:00pm</option>
                            <option value="00:16:00">4:00pm</option>
                            <option value="00:17:00">5:00pm</option>
                            <option value="00:18:00">6:00pm</option>
                          </select>


<select class="form-control" name="sessions.0.hours" id="hours" label="No. of Hours">
                           <option value="" disabled selected hidden>Hours</option>
                           <option value="4">4 hours</option>
                           <option value="5">5 hours</option>
                           <option value="6">6 hours</option>
                           <option value="7">7 hours</option>
                           <option value="8">8 hours</option>
                           <option value="9">9 hours</option>
                           <option value="10">10 hours</option>
                           <option value="11">11 hours</option>
                           <option value="12">12 hours</option>
                         </select>

function myswithcase(term){
    switch(term){
     case "10:00am":
        //  do not do anything
           break;
           case "4:00pm":
               hoursAvailable("4:00pm".split(':')[0]) 
           break;
          default:
           console.log("default");
         };
    }


function hoursAvailable(val){
    console.log(val)
    var number = parseInt(val) + 2;
    var a = Array.from(document.getElementById('hours'))
    var b = a.filter(function(rm){return rm.value > number})
    b.forEach(function(rm){
        rm.setAttribute('disabled','disabled')
})
}