Dependant Combo Boxes

0
votes

On a webpage, I have two combo boxes. The first has start times (hourly) from 9am to 9pm. The second has end times from 10am - 12pm.

The user selects a start time and an end time.

I would like to be able to have the second combo box show only those times later than the one selected in the first box.

For example, if a user choses a start time of 2pm the second combo box only shows times after and including 3pm.

I have absolutly no idea how to go about achiving this, I'm not even sure it can be done.

This is the code I have at the moment.

<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 -->
2
javascriptphpjquerycombobox
It can be done. Please include any relevant html and any attempts you have made in your question. – Steve0
I see that you're relatively new to Stack Overflow. If you think an answer helped to solve your problem, please mark it as 'accepted' by clicking the green check mark. This helps keep the focus on older questions which still don't have answers. – Matt

2 Answers

3
votes

Anything is possible in the magical world of software, not only can it be done but there are many different ways of achieving it.

Here is a rough example: 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);
  }
});
0
votes

Please make sure to provide code samples in the future.

Here is an example of how that is done: https://jsfiddle.net/c6432wee/

Say we have two selects.

<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>

We start by setting the end time hidden

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

Then we register an event handler. Everytime it is changed, we look at the value to see if it different from our default placeholder.

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

If it is, we set endTime back to its initial display state.

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