CODEWITHSUNDEEP
javascriptphpjquerycombobox
user7404503
user7404503

Reputation:

Dependant Combo Boxes

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

Upvotes: 0

Views: 90

Answers (2)

Matt
Matt

Reputation: 718

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

Upvotes: 2

ConnerAiken
ConnerAiken

Reputation: 194

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

Upvotes: 0

Related Questions