Change in Values of Dropdown , based on other dropdown

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("star开发者_Python百科tTime");

    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.

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

This can be really simple.

Store 1 set of your times in an array.

Loop through them to load the start time.

Your onChange event should then get the selectedIndex of the startTime selected and loop through the times array from that number to load the endtime.

Good luck with your code.