Remove From My Forums

How to fill DropDownList list 24 hours time from Javascript ?

Question

User-535616387 posted

Hi guys,

i have DropDownList list like below :

now my DropDownList items bind from aspx page, i want to change it from javascript.

my question is How to fill DropDownList list 24 hours time from Javascript ?

below is my DropDownList item that i want change it from javascript

                                <asp:ListItem Value="0">00.00</asp:ListItem>
                                <asp:ListItem Value="1">01.00</asp:ListItem>
                                <asp:ListItem Value="2">02.00</asp:ListItem>
                                <asp:ListItem Value="3">03.00</asp:ListItem>
                                <asp:ListItem Value="4">04.00</asp:ListItem>
                                <asp:ListItem Value="5">05.00</asp:ListItem>
                                <asp:ListItem Value="6">06.00</asp:ListItem>
                                <asp:ListItem Value="7">07.00</asp:ListItem>
                                <asp:ListItem Value="8">08.00</asp:ListItem>
                                <asp:ListItem Value="9">09.00</asp:ListItem>
                                <asp:ListItem Value="10">10.00</asp:ListItem>
                                <asp:ListItem Value="11">11.00</asp:ListItem>
                                <asp:ListItem Value="12">12.00</asp:ListItem>
                                <asp:ListItem Value="13">13.00</asp:ListItem>
                                <asp:ListItem Value="14">14.00</asp:ListItem>
                                <asp:ListItem Value="15">15.00</asp:ListItem>
                                <asp:ListItem Value="16">16.00</asp:ListItem>
                                <asp:ListItem Value="17">17.00</asp:ListItem>
                                <asp:ListItem Value="18">18.00</asp:ListItem>
                                <asp:ListItem Value="19">19.00</asp:ListItem>
                                <asp:ListItem Value="20">20.00</asp:ListItem>
                                <asp:ListItem Value="21">21.00</asp:ListItem>
                                <asp:ListItem Value="22">22.00</asp:ListItem>
                                <asp:ListItem Value="23">23.00</asp:ListItem>
                                
</asp:DropDownList>

Thank You & Regards.

Tuesday, September 26, 2017 7:03 AM

Answers

User2103319870 posted

wibowowiwit
my question is How to fill DropDownList list 24 hours time from Javascript ?

You can try with the below code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <script>
        function populate(selector) {
            var select = $(selector);
            var hours, minutes, ampm;
            for (var i = 0; i <= 1450; i += 60) {
                hours = Math.floor(i / 60);
                minutes = i % 60;
                if (minutes < 10) {
                    minutes = '0' + minutes; // adding leading zero to minutes portion
                }
                //add the value to dropdownlist
                select.append($('<option></option>')
                    .attr('value', hours)
                    .text(hours + ':' + minutes));
            }
        }
        //Calling the function on pageload
        window.onload = function (e) {
            populate('#timeDropdownlist');
        }
    </script>
</head>
<body>
    <select id="timeDropdownlist"></select>
</body>
</html>

Sample Working Demo

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Tuesday, September 26, 2017 5:09 PM

User-707554951 posted

Hi wibowowiwit,

From your description, you would fill dropdwonlist 24 hours item from javascript.

As a2h mentioned, you could use append attribute to fill item.

You could refer to the code as below:

<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <script>
        function populate(selector) {
            var select = $(selector);
            var hours, minutes, ampm;
            for (var i = 0; i <= 1380; i += 60) {
                hours = Math.floor(i / 60);
                minutes = i % 60;
                if (minutes < 10) {
                    minutes = '0' + minutes; // adding leading zero to minutes portion
                }
                //add the value to dropdownlist
                select.append($('<option></option>')
                    .attr('value', hours)
                    .text(hours + ':' + minutes));
            }
        }
        //Calling the function on pageload
        window.onload = function (e) {
            populate('#DropDownList1');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="DropDownList1" runat="server">
            </asp:DropDownList>
        </div>
    </form>
</body>

Output:

Best regards

Cathy

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Wednesday, September 27, 2017 5:32 AM

All replies