javascript - 从属组合框

Question

在网页上，我有两个组合框。第一个的开始时间(每小时)为上午 9 点至晚上 9 点。第二个事件的结束时间为上午 10 点至中午 12 点。

用户选择开始时间和结束时间。

我希望能够让第二个组合框仅显示比第一个框中所选时间晚的时间。

例如，如果用户选择下午 2 点开始时间，则第二个组合框仅显示下午 3 点之后(含)的时间。

我完全不知道如何实现这一目标，我什至不确定它是否可以做到。

这是我目前拥有的代码。

<div class="form-group">
<label class="control-label col-sm-3" for="bookingTime">Times of your booking</label>
<div class="col-sm-4">
<select class="form-control" name="bookingStartTime" id="bookingStartTime">
    <option>Select start time</option>
    <option value="9am">9 am</option>
    <option value="10am">10 am</option>
    <option value="11am">11 am</option>
    <option value="12pm">12 pm</option>
    <option value="1pm">1 pm</option>
    <option value="2pm">2 pm</option>
    <option value="3pm">3 pm</option>
    <option value="4pm">4 pm</option>
    <option value="5pm">5 pm</option>
    <option value="6pm">6 pm</option>
    <option value="7pm">7 pm</option>
    <option value="8pm">8 pm</option>
    <option value="9pm">9 pm</option>
</select>
</div>
<!-- /#bookingStartTime -->

<div class="col-sm-offset-1 col-sm-4">
<select class="form-control" name="bookingEndTime" id="bookingEndTime">
    <option>Select finish time</option>
    <option value="10am">10 am</option>
    <option value="11am">11 am</option>
    <option value="12pm">12 pm</option>
    <option value="1pm">1 pm</option>
    <option value="2pm">2 pm</option>
    <option value="3pm">3 pm</option>
    <option value="4pm">4 pm</option>
    <option value="5pm">5 pm</option>
    <option value="6pm">6 pm</option>
    <option value="7pm">7 pm</option>
    <option value="8pm">8 pm</option>
    <option value="9pm">9 pm</option>
    <option value="10pm">10 pm</option>
    <option value="11pm">11 pm</option>
    <option value="12pm">12 pm</option>
</select>
</div>          
<!-- /bookingEndTime -->

Answer 1

在软件的神奇世界里一切皆有可能，不仅可以做到，而且有很多不同的方法来实现它。

这是一个粗略的例子: https://jsfiddle.net/n6fm39ww/

HTML

<select name="start_time">
</select>

<select name="end_time">
  <option value="default">Pick a start time</option>
</select>

JS

// Add each option to start_times
for (var hour = 9; hour <= 21; hour++) {
  var option = "<option value='"+hour+"'>"+hour+"</option>";
    $('[name="start_time"]').append(option);
}

// When the start time is changed, set the end time
$('[name="start_time"]').on('change', function() {
    // This is the start time chosen
  var start_time = $(this).val();
  // Remove the default option
  $('[name="end_time"]').find('option').remove();
  // Add options after the start time
  for (var hour = parseInt(start_time) + 1; hour <= 24; hour++) {
      var option = "<option value='"+hour+"'>"+hour+"</option>";
    $('[name="end_time"]').append(option);
  }
});