Javascript动态时间下拉菜单 [英] Javascript Dynamic Time Drop Down

问题描述

我不擅长Javascript Time操作。

I'm not very good at Javascript Time manipulation.

这是我想要做的：我有一个需要结束时间下拉列表的UI 。它是有限的一组时间，主要是从上午7点到下午10点，以15分钟为增量。我正在使用jQuery并希望动态创建一个如下所示的选择框：

Here is what I am trying to do: I have a UI that needs a end time drop down list. Its a finite set of times, essentially from 7:00 AM to 10:00 PM in 15 minute increments. I'm using jQuery and want to create on the fly a Select box that looks like this:

<select>
<option value="420">7:00 AM</option>
<option value="435">7:15 AM</option>
<option value="450">7:30 AM</option>
etc...
</select>

任何人都知道如何在javascript / jQuery中执行此操作。我想做一些像这样的动态：

Anyone know how to do this in javascript/jQuery. I want to do something dynamic like this:

for(int i = 420; i<=1320; i+=15){
//use value of i to increment a date or something and create an option for the drop down... this is where I am stuck
}

推荐答案

以下代码段可以帮助您理解：

The following snippet should help you get the idea:

function populate(selector) {
    var select = $(selector);
    var hours, minutes, ampm;
    for(var i = 420; i <= 1320; i += 15){
        hours = Math.floor(i / 60);
        minutes = i % 60;
        if (minutes < 10){
            minutes = '0' + minutes; // adding leading zero
        }
        ampm = hours % 24 < 12 ? 'AM' : 'PM';
        hours = hours % 12;
        if (hours === 0){
            hours = 12;
        }
        select.append($('<option></option>')
            .attr('value', i)
            .text(hours + ':' + minutes + ' ' + ampm)); 
    }
}

populate('#timeSelect'); // use selector for your select

这篇关于Javascript动态时间下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！