locked
How to fill DropDownList list 24 hours time from Javascript ? RRS feed

  • 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>
    • 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

  • 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>
    • 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
  • User-535616387 posted

    it works. Laughing

    Thank You so Much A2h & Cathy Zou. 

    Monday, October 2, 2017 3:13 AM