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

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

2 个答案: