Q:

Dropdown validation onchange of start period in javascript

I was just wondering how I would update the values in length based on what the user selects in start period.
For example, if user selects 09:00 - 09:50 then start period has the options 1-7.
If user selects 10:00 - 10:50 then start period has the options 1-6.
...
If user selects 17:00 - 17:50 then start period has the options 1.
How would I achieve this using javascript?
Here is my code so far:
http://jsfiddle.net/RmXuH/
<p>
  <label>Start Period</label>
  <select onchange="reloadRoomPreference();" id = "edit_req_start" name="">
    <option>09:00 - 09:50</option>
    <option>10:00 - 10:50</option>
    <option>11:00 - 11:50</option>
    <option>12:00 - 12:50</option>
    <option>13:00 - 13:50</option>
    <option>14:00 - 14:50</option>
    <option>15:00 - 15:50</option>
    <option>16:00 - 16:50</option>
    <option>17:00 - 17:50</option>
  </select>
</p>
<p>
  <label>Length</label>
  <select onchange="reloadRoomPreference();" id = "edit_req_length" name="">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
  </select>
</p>

A:

Something like this do it:
<p>
  <label>Start Period</label>
  <select onchange="reloadRoomPreference();" id = "edit_req_start" name="">
    <option value="0">09:00 - 09:50</option>
    <option value="1">10:00 - 10:50</option>
    <option value="2">11:00 - 11:50</option>
    <option value="3">12:00 - 12:50</option>
    <option value="4">10:00 - 13:50</option>
    <option value="5">14:00 - 14:50</option>
    <option value="6">15:00 - 15:50</option>
    <option value="7">16:00 - 16:50</option>
    <option value="8">17:00 - 17:50</option>
  </select>
</p>
<p>
  <label>Length</label>
  <select onchange="reloadRoomPreference();" id = "edit_req_length" name="">
  </select>
</p>

Javascript:
var optionsValue = [1, 2, 3, 4, 5, 6, 7] //Contains the values displayed in the second dropdown

//Populate with all the values
for (var i = 0; i < optionsValue.length ; i++)
    $('#edit_req_length').append('<option>' + optionsValue[i] + '</option>');

//Triggered each time you change the first dropdown
$('#edit_req_start').on('change', function(data) {
    var options = $(this).children('option');
    $('#edit_req_length').empty();
    for (var i = 0; i < optionsValue.length - $(this).val() ; i++)
        //This way, we don't have any empty value
        if (i >= optionsValue.length)
            $('#edit_req_length').append('<option>' + optionsValue[optionsValue.length - 1] + '</option>');
        else
            $('#edit_req_length').append('<option>' + optionsValue[i] + '</option>');
});

JSFiddle here: http://jsfiddle.net/hda7f/
But you have more values on the first dropdown than on the second, so I added a condition to leave at least 1 item in the second dropdown.

