Onload Function Dropdown Time <HTML>

Question

I want to be able to fill a dropdown list when the page is loaded.

At the moment I got 2 dropdowns which both use the onloadFunction(). The function will fill the dropdown with the next hour.

But I only want the first dropdown(leavedrop) to display the time and the second dropdown(returndrop) to stay empty.

How can I do this?

<body onload="onloadFunction()">

Leaving: <select id="leavedrop">
        <option value="0">00:00</option>
        <option value="1">01:00</option>
        <option value="2">02:00</option>
        <option value="3">03:00</option>
        <option value="4">04:00</option>
        <option value="5">05:00</option>
        <option value="6">06:00</option>
        <option value="7">07:00</option>
        <option value="8">08:00</option>
        <option value="9">09:00</option>
        <option value="10">10:00</option>
        <option value="11">11:00</option>
        <option value="12">12:00</option>
        <option value="13">13:00</option>
        <option value="14">14:00</option>
        <option value="15">15:00</option>
        <option value="16">16:00</option>
        <option value="17">17:00</option>
        <option value="18">18:00</option>
        <option value="19">19:00</option>
        <option value="20">20:00</option>
        <option value="21">21:00</option>
        <option value="22">22:00</option>
        <option value="24">23:00</option>
    </select>  

 Return: <select id="returndrop">
        <option value="0">00:00</option>
        <option value="1">01:00</option>
        <option value="2">02:00</option>
        <option value="3">03:00</option>
        <option value="4">04:00</option>
        <option value="5">05:00</option>
        <option value="6">06:00</option>
        <option value="7">07:00</option>
        <option value="8">08:00</option>
        <option value="9">09:00</option>
        <option value="10">10:00</option>
        <option value="11">11:00</option>
        <option value="12">12:00</option>
        <option value="13">13:00</option>
        <option value="14">14:00</option>
        <option value="15">15:00</option>
        <option value="16">16:00</option>
        <option value="17">17:00</option>
        <option value="18">18:00</option>
        <option value="19">19:00</option>
        <option value="20">20:00</option>
        <option value="21">21:00</option>
        <option value="22">22:00</option>
        <option value="24">23:00</option>
    </select>  
</body>

<script>
function onloadFunction(){

var hourToSelect = new Date().getHours() + 1;
     if(hourToSelect === 24) hourToSelect = 00;
     $("option[value='" + hourToSelect + "']").attr('selected', 'selected');    
}
</script>

Racil Hilan · Accepted Answer · 2015-11-22 19:47:17Z

If you only want the first dropdown leavedrop to display the time, then specify its ID in your jQuery selector. Try this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="onloadFunction()">

Leaving: <select id="leavedrop">
        <option value="0">00:00</option>
        <option value="1">01:00</option>
        <option value="2">02:00</option>
        <option value="3">03:00</option>
        <option value="4">04:00</option>
        <option value="5">05:00</option>
        <option value="6">06:00</option>
        <option value="7">07:00</option>
        <option value="8">08:00</option>
        <option value="9">09:00</option>
        <option value="10">10:00</option>
        <option value="11">11:00</option>
        <option value="12">12:00</option>
        <option value="13">13:00</option>
        <option value="14">14:00</option>
        <option value="15">15:00</option>
        <option value="16">16:00</option>
        <option value="17">17:00</option>
        <option value="18">18:00</option>
        <option value="19">19:00</option>
        <option value="20">20:00</option>
        <option value="21">21:00</option>
        <option value="22">22:00</option>
        <option value="24">23:00</option>
    </select>  

 Return: <select id="returndrop">
        <option value="0">00:00</option>
        <option value="1">01:00</option>
        <option value="2">02:00</option>
        <option value="3">03:00</option>
        <option value="4">04:00</option>
        <option value="5">05:00</option>
        <option value="6">06:00</option>
        <option value="7">07:00</option>
        <option value="8">08:00</option>
        <option value="9">09:00</option>
        <option value="10">10:00</option>
        <option value="11">11:00</option>
        <option value="12">12:00</option>
        <option value="13">13:00</option>
        <option value="14">14:00</option>
        <option value="15">15:00</option>
        <option value="16">16:00</option>
        <option value="17">17:00</option>
        <option value="18">18:00</option>
        <option value="19">19:00</option>
        <option value="20">20:00</option>
        <option value="21">21:00</option>
        <option value="22">22:00</option>
        <option value="24">23:00</option>
    </select>  
</body>

<script>
function onloadFunction(){

var hourToSelect = new Date().getHours() + 1;
     if(hourToSelect === 24) hourToSelect = 00;
     $("#leavedrop [value='" + hourToSelect + "']").attr('selected', 'selected');    
}
</script>

Collectives™ on Stack Overflow

Onload Function Dropdown Time <HTML>

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related