Search
showing results for - "create a drop down to select time javascript"
Marlene
01 Nov 2020
1function populate(selector) {
2    var select = $(selector);
3    var hours, minutes, ampm;
4    for(var i = 420; i <= 1320; i += 15){
5        hours = Math.floor(i / 60);
6        minutes = i % 60;
7        if (minutes < 10){
8            minutes = '0' + minutes; // adding leading zero
9        }
10        ampm = hours % 24 < 12 ? 'AM' : 'PM';
11        hours = hours % 12;
12        if (hours === 0){
13            hours = 12;
14        }
15        select.append($('<option></option>')
16            .attr('value', i)
17            .text(hours + ':' + minutes + ' ' + ampm)); 
18    }
19}
20
21populate('#timeSelect'); // use selector for your select
22
source
Hector
27 Jun 2020
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width">
6    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
7    <script>
8        function populate(selector) {
9            var select = $(selector);
10            var hours, minutes, ampm;
11            for (var i = 0; i <= 1450; i += 60) {
12                hours = Math.floor(i / 60);
13                minutes = i % 60;
14                if (minutes < 10) {
15                    minutes = '0' + minutes; // adding leading zero to minutes portion
16                }
17                //add the value to dropdownlist
18                select.append($('<option></option>')
19                    .attr('value', hours)
20                    .text(hours + ':' + minutes));
21            }
22        }
23        //Calling the function on pageload
24        window.onload = function (e) {
25            populate('#timeDropdownlist');
26        }
27    </script>
28</head>
29<body>
30    <select id="timeDropdownlist"></select>
31</body>
32</html>
source
similar questions
dynamic select option dropdown in jqueryadd new items in a select input using jshow to select an element in javascriptdynamic load option of select with javascriptjavascript select element in dropdowndropdown list using jsget selected text of html dropdown in javascriptdrop down menu jsjs extract options from selectmake select option selected javascriptselect html jsselect element in jshow to populate state dropdown based on option selected in country dropdown using jqueryjquery dropdown selectjavascript change select options dynamicallynodejs store selected dropdown in variablepopulate dropdown using jquery from databasejquery select dropdown
queries leading to this page
create a drop down to select time javascriptcreate a drop down to select time javascript