Answered by:
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>
- 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.
Thank You so Much A2h & Cathy Zou.
Monday, October 2, 2017 3:13 AM