如何按当前时间设置下拉列表的默认选择？

Question

我尝试为网站制作时间选择器或查找 jquery、Bootstrap 等是否有它们自己的（HTML 自己在 Firefox 上使用 AM/PM，我无法更改），我发现的只是 github 项目和我不能在这个项目中使用很多像它们这样的依赖项。

所以我的最后一个解决方案是添加 2 个下拉菜单，1 个当前小时，1 个当前分钟。不是最漂亮的解决方案，但它可以完成工作。

<div class="col-lg-2">
    <select name="Hour">
    @{
        for(int i = 0; i < 24; i++)
        {
            @:<option value="@i">@i.ToString("D2")</option>
        }
    }
    </select>
    <b>:</b>
    <select name="Minute">
        @{
            for (int i = 0; i < 60; i++)
            {
                @:<option value="@i">@i.ToString("D2")</option>
            }
        }
    </select>
</div>

我想要做的是，我有一个将默认日期设置为今天的日期选择器，我想对这些下拉列表做同样的事情，选择当前小时和第一，当前分钟和秒。

我该怎么做？

（也欢迎任何关于更好的时钟/时间选择器的建议，但我发现这个对于我的项目来说已经足够了，而且看起来不错）

Answer 1

您可以从日期中获取时间并使用这样的时间重置下拉列表。

var html = '';
for (var i = 0; i < 60; i++) {
  html += "<option value = '" + i + "' >" + i + "</option>";
}
$('#minute').append(html);
var d = new Date();
var n = d.getMinutes();
$("#minute").val(n);

var htm = '';
for (var j = 0; j < 24; j++) {
  htm += "<option value = '" + j + "' >" + j + "</option>";
}
$('#hour').append(htm);
var dt = new Date();
var h = dt.getHours();
$("#hour").val(h);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='minute'>

</select>
<select id='hour'>

</select>