javascript中开始周期更改时的下拉验证

我只是想知道如何根据用户在开始时段中选择的内容更新长度中的值

例如，如果用户选择09:00-09:50，则开始时段具有选项1-7

如果用户选择10:00-10:50，则开始时段具有选项1-6

如果用户选择17:00-17:50，则开始时段有选项1

如何使用javascript实现这一点

以下是我目前的代码：

起始期
09:00 - 09:50
10:00 - 10:50
11:00 - 11:50
12:00 - 12:50
13:00 - 13:50
14:00 - 14:50
15:00 - 15:50
16:00 - 16:50
17:00 - 17:50


长度
1.
2.
3.
4.
5.
6.
7.

类似于这样的操作：

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

起始期
09:00 - 09:50
10:00 - 10:50
11:00 - 11:50
12:00 - 12:50
10:00 - 13:50
14:00 - 14:50
15:00 - 15:50
16:00 - 16:50
17:00 - 17:50


长度

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

var optionsValue=[1,2,3,4,5,6,7]//包含第二个下拉列表中显示的值
//填充所有值
对于（变量i=0；i=optionsValue.length）
$（'#edit_req_length'）。追加（''+optionsValue[optionsValue.length-1]+''）；
其他的
$（'edit#req_length'）。追加（''+选项值[i]+''）；
});

请点击此处：

但是第一个下拉列表中的值比第二个下拉列表中的值多，所以我添加了一个条件，在第二个下拉列表中至少保留1项

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