javascript - Select option validation for start and end time -

javascript - Select option validation for start and end time -

select start time

<select name="start-time"> <option value="00:00 am" selected="selected">00:00 am</option><option value="00:30 am">00:30 am</option><option value="01:00 am">01:00 am</option><option value="01:30 am">01:30 am</option><option value="02:00 am">02:00 am</option><option value="02:30 am">02:30 am</option><option value="03:00 am">03:00 am</option><option value="03:30 am">03:30 am</option><option value="04:00 am">04:00 am</option><option value="04:30 am">04:30 am</option><option value="05:00 am">05:00 am</option><option value="05:30 am">05:30 am</option><option value="06:00 am">06:00 am</option><option value="06:30 am">06:30 am</option><option value="07:00 am">07:00 am</option><option value="07:30 am">07:30 am</option><option value="08:00 am">08:00 am</option><option value="08:30 am">08:30 am</option><option value="09:00 am">09:00 am</option><option value="09:30 am">09:30 am</option><option value="10:00 am">10:00 am</option><option value="10:30 am">10:30 am</option><option value="11:00 am">11:00 am</option><option value="11:30 am">11:30 am</option><option value="12:00 pm">12:00 pm</option><option value="12:30 pm">12:30 pm</option><option value="13:00 pm">13:00 pm</option><option value="13:30 pm">13:30 pm</option><option value="14:00 pm">14:00 pm</option><option value="14:30 pm">14:30 pm</option><option value="15:00 pm">15:00 pm</option><option value="15:30 pm">15:30 pm</option><option value="16:00 pm">16:00 pm</option><option value="16:30 pm">16:30 pm</option><option value="17:00 pm">17:00 pm</option><option value="17:30 pm">17:30 pm</option><option value="18:00 pm">18:00 pm</option><option value="18:30 pm">18:30 pm</option><option value="19:00 pm">19:00 pm</option><option value="19:30 pm">19:30 pm</option><option value="20:00 pm">20:00 pm</option><option value="20:30 pm">20:30 pm</option><option value="21:00 pm">21:00 pm</option><option value="21:30 pm">21:30 pm</option><option value="22:00 pm">22:00 pm</option><option value="22:30 pm">22:30 pm</option><option value="23:00 pm">23:00 pm</option><option value="23:30 pm">23:30 pm</option></select>

select end time

<select name="end-time"> <option value="00:00 am" selected="selected">00:00 am</option><option value="00:30 am">00:30 am</option><option value="01:00 am">01:00 am</option><option value="01:30 am">01:30 am</option><option value="02:00 am">02:00 am</option><option value="02:30 am">02:30 am</option><option value="03:00 am">03:00 am</option><option value="03:30 am">03:30 am</option><option value="04:00 am">04:00 am</option><option value="04:30 am">04:30 am</option><option value="05:00 am">05:00 am</option><option value="05:30 am">05:30 am</option><option value="06:00 am">06:00 am</option><option value="06:30 am">06:30 am</option><option value="07:00 am">07:00 am</option><option value="07:30 am">07:30 am</option><option value="08:00 am">08:00 am</option><option value="08:30 am">08:30 am</option><option value="09:00 am">09:00 am</option><option value="09:30 am">09:30 am</option><option value="10:00 am">10:00 am</option><option value="10:30 am">10:30 am</option><option value="11:00 am">11:00 am</option><option value="11:30 am">11:30 am</option><option value="12:00 pm">12:00 pm</option><option value="12:30 pm">12:30 pm</option><option value="13:00 pm">13:00 pm</option><option value="13:30 pm">13:30 pm</option><option value="14:00 pm">14:00 pm</option><option value="14:30 pm">14:30 pm</option><option value="15:00 pm">15:00 pm</option><option value="15:30 pm">15:30 pm</option><option value="16:00 pm">16:00 pm</option><option value="16:30 pm">16:30 pm</option><option value="17:00 pm">17:00 pm</option><option value="17:30 pm">17:30 pm</option><option value="18:00 pm">18:00 pm</option><option value="18:30 pm">18:30 pm</option><option value="19:00 pm">19:00 pm</option><option value="19:30 pm">19:30 pm</option><option value="20:00 pm">20:00 pm</option><option value="20:30 pm">20:30 pm</option><option value="21:00 pm">21:00 pm</option><option value="21:30 pm">21:30 pm</option><option value="22:00 pm">22:00 pm</option><option value="22:30 pm">22:30 pm</option><option value="23:00 pm">23:00 pm</option><option value="23:30 pm">23:30 pm</option></select>

is there quick jquery login disable previous options in end time if start time chosen between.

for illustration if start time chosen 3pm , in end time options before 3pm should disabled.

is there easy way in jquery?

thanks

this should work using selected option's index , disabling other select options index:

$('select[name=start-time]').on("change",function(){ var theselectedindex = $(this)[0].selectedindex; $.each($('select[name=end-time] option'), function(){ var endoptionindex = $(this).index(); if (endoptionindex < theselectedindex){ $(this).attr('disabled','disabled'); } else{ $(this).removeattr('disabled').prop('selected', true); homecoming false; } }); });

fiddle: http://jsfiddle.net/nuav3/

javascript jquery