Question

问候Stackoverflow退伍军人，

我使用小型输入安全功能一直在苦苦挣扎。从本质上讲，对于我的网站，用户可以选择他们希望开始的时间并结束他们的早班。

我有两个Select输入，这些输入由循环中的date填充。基本上，我一直在尝试（徒劳）实现的是当有人从“开始时间”下拉菜单中选择开始日期时，“结束时间”下拉列表的所有值都小于“开始时间”，禁用。

我在下方提供了一张图片，以帮助解释一下，以及我目前的代码与select的工作原理有关。

至于Javascript的任何进展，基本上都没有。我尝试的一切都没有用，我开始努力思考新的想法。我花了很多时间尝试在StackOverflow上找到解决方案，但我可能会使用错误的关键字进行搜索。

The start time has been selected on the Left Dropdown, at 07:00, but on the Right Dropdown, anything before 07:00 should now be removed / disabled.

<select id="mondayWorking_MorningStart" class="workInput" >
  <?php 
    $tStart = strtotime($start); 
    $tEnd = strtotime($end); 
    $tNow = $tStart;

    while($tNow <= $tEnd)
    {
      echo "<option id='monday_MorningStart' name='mondayMorningStart'>" . date("H:i",$tNow) . "</option>"; 
      $tNow = strtotime('+30 minutes',$tNow);
    }
  ?>
</select>

感谢您的帮助，

如果您还需要其他任何帮助，请告诉我们！

Answer 1

要根据第一个下拉值填充第二个下拉列表，首先必须将onChange事件绑定到第一个下拉列表。这意味着当您更改第一个下拉列表并选择另一个选项时，JavaScript（在我们的示例中为jquery）将触发事件并运行代码。

在该函数（代码）中，我们获取第一个下拉列表的值，然后清除第二个下拉列表的选项，并根据第一个下拉值重新填充第二个下拉列表的内容。

我假设第二个下拉最大值可以是24:00，最小值应该等于第一个下拉值+ 30分钟......

我刚刚添加了几个选项来首先选择进行测试。你正在加载你的PHP代码，它没有任何区别......

所以代码将是这样的：

＆＃13;

$('#selStart').change(function(){
  var arrTimeStart = $(this).val().split(":");
  var timeStart = parseInt(arrTimeStart[0] * 60) + parseInt(arrTimeStart[1]);
  timeStart = timeStart + 30;
  var timeEnd = (24 * 60);
  
  $('#selEnd').find('option').remove();
  for (iCnt = timeStart; iCnt <= timeEnd; iCnt = iCnt + 30){
    vHour = parseInt(iCnt / 60);
    vMin = iCnt % 60;
    if(vMin == 0)
      vMin = '00';
    tmpTime = vHour + ':' + vMin;
    $('#selEnd').append('<option value='+tmpTime+'>'+tmpTime+'</option>');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Start:
<select id="selStart">
  <option value="00:00">00:00</option>
  <option value="00:30">00:30</option>
  <option value="01:00">01:00</option>
  <option value="01:30">01:30</option>
  <option value="02:00">02:00</option>
  <option value="02:30">02:30</option>
  <option value="03:00">03:00</option>
  <option value="03:30">03:30</option>
  <option value="04:00">04:00</option>
  <option value="04:30">04:30</option>
</select>
<br>
End:
<select id="selEnd"></select>

＆＃13;

已加入/已连接的动态下拉列表

1 个答案: