HTML - 基于时间的变化小时下拉

Question

所以我有两个下拉列表如下：

第一个基于开始时间：

<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> 

而第二个基础上，从开始时间的小时数：

<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> 

我想是第二个下拉菜单根据选定的，这样的时间开始时间后的数字没有超越关闭时间（晚上10点）开始时间变化。示例：

• 上午10点开始允许您从最小（4小时）到最大（12小时）之间选择任意小时数。

• 下午4点开始，您可以选择从最少4小时到最多6小时的小时数。

Answer 1

我希望这可以帮助你。

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> 

<select class="form-control" name="sessions.0.hours" id="hours" label="No. of Hours"> 
    <option value="" disabled selected hidden>Hours</option> 
</select> 

JS JQuery的

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); 
}); 

Answer 2

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> 

JS

function myfunction（val）{ myswithcase（val [val.selectedIndex] .innerHTML）;

}

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') 
}) 
}