Question

I have two dropdowns

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

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

Snippet of javascript function

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

I need some help in writing/modifying above javascript function in Which the value(time) in DropDown 2 should always be greater than the value selected in DropDown 1. i.e If a user selects 11 AM from DropDown 1, the DropDown 2 must ONLY contain all the values greater than 11AM i.e 12PM, 1PM, 2PM, 3PM, 4PM.

Answer 1

DEMO HERE

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