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

Answer 2

请确保将来提供代码示例。

以下是如何完成此操作的示例：https://jsfiddle.net/c6432wee/

假设我们有两个选择。

<select id="startTime"> <option value="na">Please Select A Time</option> <option value=1>1:00PM</option> </select>

<select id="endTime"> <option value="na">Please Select A Time</option> <option value=1>1:00PM</option> </select>

我们首先设置隐藏的结束时间

$('#endTime').css('display', 'none');

然后我们注册一个事件处理程序。每次更改时，我们都会查看该值，看它是否与我们的默认占位符不同。

  $('#startTime').change(function () {
    if($('#startTime').val() !== 'na') {
      $('#endTime').css('display', 'initial');
    }
  });

如果是，我们将endTime设置回其初始显示状态。

$('#endTime').css('display', 'initial');

依赖组合框

2 个答案: