Drop down End time change based on Start time using Javascript

Question

I have two select drop down for Start time and End Time. My start time starts from 07:00 and end time ends until 07:00 the next day. I want my end time to change such that when user select 19:00 for start time, the end time drop down should automatically list down from 20:00 until 07:00. How can i achieve this using JS? Thank you

        Start Time:
        <select name='start' id='start'>
            <option value='07:00'>07:00</option>
            <option value='07:00'>08:00</option>
            <option value='07:00'>09:00</option>
            .......
            <option value='23:00'>23:00</option>
            <option value='00:00'>00:00</option>
            .......
            <option value='05:00'>05:00</option>
            <option value='06:00'>06:00</option>
            <option value='07:00'>07:00</option>
        </select>
        End Time:
        <select name='end' id='end'>
            <option value='07:00'>07:00</option>
            <option value='07:00'>08:00</option>
            <option value='07:00'>09:00</option>
            ........
            <option value='23:00'>23:00</option>
            <option value='00:00'>00:00</option>
            .......
            <option value='05:00'>05:00</option>
            <option value='06:00'>06:00</option>
            <option value='07:00'>07:00</option>
        </select>

slack · Accepted Answer · 2022-10-05 07:49:00Z

1

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Start Time:
        <select name='start' id='start' onchange="$('#end').find('option').each(function( key, value ) { if(parseInt($(value).val())<parseInt($('#start').val())) {$(value).hide();} else {$(value).show();}   });">
            <option value='7'>07:00</option>
            <option value='8'>08:00</option>
            <option value='9'>09:00</option>
            .......
            <option value='23'>23:00</option>
            <option value='0'>00:00</option>
            .......
            <option value='5'>05:00</option>
            <option value='6'>06:00</option>
            <option value='7'>07:00</option>
        </select>
        End Time:
        <select name='end' id='end'>
            <option value='7'>07:00</option>
            <option value='8'>08:00</option>
            <option value='9'>09:00</option>
            ........
            <option value='23'>23:00</option>
            <option value='0'>00:00</option>
            .......
            <option value='5'>05:00</option>
            <option value='6'>06:00</option>
            <option value='7'>07:00</option>
        </select>

answered Oct 5, 2022 at 7:49

slack

111 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Drop down End time change based on Start time using Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related