javascript - Timepicker - 下拉菜单之间的依赖关系

Question

我有一个表格，可以让我添加旅行时间和工作时间。例如，我可以知道我什么时候离开公司，什么时候到达客户，然后反过来。还有工作时间，我什么时候开始工作，什么时候去吃午饭，下午也是如此。这里的问题是我没有在下拉列表之间进行任何验证。

例如，我可以说它在 09:00 出发，而我在 08:00 到达。例如，当我选择 09:00 时，下一个下拉列表应从 09:30 开始加载。

我可以添加几天，因此我使用这样的标签名称 hour-day-1[]。

如何使用时间选择器创建这种依赖关系？

这是我的 html 表单:

    <tr>
       <td><label>Day 1:</label></td>
       <td><label>Go</label></td>
       <td class="@if ($errors->has('hour-day-1[1]')) has-error @endif">
          {!! Form::text('hour-day-1[1]', old('hour-day-1[1]'), ['class' => 'form-control travelGoStartHour', 'placeholder'=> '']) !!}
       </td>
       <td class="@if ($errors->has('hour-day-2[1]')) has-error @endif">
          {!! Form::text('hour-day-2[1]', old('hour-day-2[1]'), ['class' => 'form-control travelGoEndHour', 'placeholder'=> '']) !!}
       </td>
       <td>
          <label>Back</label>
       </td>
       <td class="@if ($errors->has('hour-day-3[1]')) has-error @endif">
          {!! Form::text('hour-day-3[1]', old('hour-day-3[1]'), ['class' => 'form-control travelBackStartHour', 'placeholder'=> '']) !!}
       </td>
       <td class="@if ($errors->has('hour-day-4[1]')) has-error @endif">
          {!! Form::text('hour-day-4[1]', old('hour-day-4[1]'), ['class' => 'form-control travelBackEndHour', 'placeholder'=> '']) !!}
       </td>
       <td>
         <i class="icon-plus-circled add-new-day-travel" title="Add New Day" data-id="1"></i>
       </td>
    </tr>

这是我初始化时间选择器的方式:

    $('.travelGoStartHour').timepicker({
      'minTime': '8:00',
      'maxTime': '20:00',
      'showDuration': true,
      'timeFormat': 'HH:mm:ss'
    });
    $('.travelGoEndHour').timepicker({
      'minTime': '8:00',
      'maxTime': '20:00',
      'showDuration': true,
      'timeFormat': 'HH:mm:ss'
    });
    $('.travelBackStartHour').timepicker({
      'minTime': '8:00',
      'maxTime': '20:00',
      'showDuration': true,
      'timeFormat': 'HH:mm:ss'
    });
    $('.travelBackEndHour').timepicker({
      'minTime': '8:00',
      'maxTime': '20:00',
      'showDuration': true,
      'timeFormat': 'HH:mm:ss'
    });

谢谢

Answer 1

像这样的东西应该有效......

$('.travelGoStartHour').on('changeTime', function() {
    var selectedValue = $(this).val();
    $('.travelGoEndHour').option('minTime', selectedValue);
});

$('.travelBackStartHour').on('changeTime', function() {
    var selectedValue = $(this).val();
    $('.travelBackEndHour').option('minTime', selectedValue);
});