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

Posted 2023-05-08

【中文标题】如何按当前时间设置下拉列表的默认选择？

【英文标题】：How to set default selection of a dropdown by current hour?

【发布时间】：2018-07-10 07:14:37

【问题描述】：

我尝试为网站制作时间选择器或查找 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>

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

我该怎么做？

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

【问题讨论】：

我觉得this对你有帮助。

就像我说的，我不能使用 github 项目并且有依赖项。更不用说它是一个日期选择器，我需要一个时间选择器，我已经在使用 jQuery 的日期选择器，效果很好。由于我找不到合适的 Bootstrap、jQuery 或 HTML 的时间选择器，我使用的是下拉菜单。

【参考方案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>

【讨论】：

我已经从 Razor 获得下拉选项，所以我假设我需要的只是 var dt = new Date(); var h = dt.getHours(); $("#hour").val(h);那么部分呢？

很高兴为您提供帮助。快乐编码:)