Изменение значений раскрывающегося списка на основе другого раскрывающегося списка

Question

У меня есть два выпадающих списка

Выпадающих 1

<form:select path="StartTimings" id="startTime" onchange="javascript:changeTiming()">
   <form:option value="9:00 AM">9:00 AM</form:option>
   <form:option value="10:00 AM">10:00 AM</form:option>
   <form:option value="11:00 AM">11:00 AM</form:option>
   <form:option value="12:00 PM">12:00 PM</form:option>
   <form:option value="1:00 PM">1:00 PM</form:option>
   <form:option value="2:00 PM">2:00 PM</form:option>
   <form:option value="3:00 PM">3:00 PM</form:option>
</form:select>

Выпадающих 2

<form:select path="EndTimings" id="endTime">
   <form:option value="10:00 AM">10:00 AM</form:option>
   <form:option value="11:00 AM">11:00 AM</form:option>
   <form:option value="12:00 PM">12:00 PM</form:option>
   <form:option value="1:00 PM">1:00 PM</form:option>
   <form:option value="2:00 PM">2:00 PM</form:option>
   <form:option value="3:00 PM">3:00 PM</form:option>
   <form:option value="4:00 PM">4:00 PM</form:option>
</form:select>

Фрагмент функции javascript

function changeTiming() {    
    var select1 = document.getElementById("startTime");

    if (select1.value == "10:00 AM") {
      document.getElementById("endTime").selectedIndex = 1;
    } else if (select1.value == "11:00 AM") {
      document.getElementById("endTime").selectedIndex = 2;
    } else if (select1.value == "12:00 PM") {
      document.getElementById("endTime").selectedIndex = 3;
    }

Мне нужна помощь в написании / изменении вышеуказанной функции javascript, в которой значение (время) в DropDown 2 всегда должно быть больше значениявыбрано в DropDown 1 .То есть, если пользователь выбирает 11:00 из DropDown 1, DropDown 2 должен ONLY содержать все значения больше 11:00, т.е. 12:00, 1:00, 2:00, 3:00, 4:00.

Answer 1

ДЕМО ЗДЕСЬ

window.onload=function() {
  var start = document.getElementById("startTime");
  var end   = document.getElementById("endTime");
  start.onchange=function() {
    end.options.length=0;
    for (var i=this.selectedIndex+1;i<this.options.length;i++) {
      end.options[end.options.length]=new Option(this.options[i].text,this.options[i].value);
    }
    end.options[end.options.length]=new Option("4:00 PM","4:00 PM");
  }
  start.onchange();
}

Answer 2

Это может быть очень просто.

Хранить 1 набор ваших времен в массиве.

Перебирать их для загрузки времени начала.

Ваше событие onChangeзатем выберите selectedIndex для startTime selected и переберите массив времен из этого числа, чтобы загрузить конечное время.

Удачи в вашем коде.