I have two dropdown menus. One is enables the user pick a 'time from', The other is to pick 'time until'. In order to assure the user does not pick a time on the second dropdown that is before the first time, I want to remove all times from the second dropdown that are earlier then the time picked in the first dropdown {via javascript). How can I do this?
<select class="fromWhen form-control" name="From" id="">
<option value=""></option>
<option value="12:00:00">12:00 PM</option>
<option value="12:30:00">12:30 PM</option>
<option value="13:00:00">1:00 PM</option>
<option value="13:30:00">1:30 PM</option>
<option value="14:00:00">2:00 PM</option>
</select>
<select class="untilWhen form-control " name="Until" id="">
<option value=""></option>
<option value="12:00:00">12:00 PM</option>
<option value="12:30:00">12:30 PM</option>
<option value="13:00:00">1:00 PM</option>
<option value="13:30:00">1:30 PM</option>
<option value="14:00:00">2:00 PM</option>
</select>
change
event on both the dropdowns. In handler, get the selected value using$(this).val()
, Use$(otherDropdown).children('option[value="' + thatValue + '"]').prevAll().remove();
to remove all the options having time before selected time. UsenextAll
in other case. Let me know if you face any problem in this.