Javascript 如何在滚动下拉输入div中直观地重新排序元素？

我试图模仿一个带有下拉菜单的计时器，就像谷歌日历上的一样。矿山的结构如下：

HTML:

其他一切都可以工作，但下拉列表在顶部显示“00:00”，而默认情况下显示“12:00”（或最接近当前选择的值）更有意义

我该怎么做

有关当前的实现，请参阅。我正在使用jQuery（希望看到有人在Angular上实现它，但这可能是另一个问题）

---

您可以在此处看到它的工作原理：

我已尝试按您的要求执行操作，但无法将所选内容移动到下拉列表的顶部

基本上，我创建了一个

var

，可以选择

timeArr

索引（

第51行，第52行）

然后在填写下拉列表时，将所选的
timeArr
与当前的
timeArr
（
第23行
）进行比较

如果当前的
timeArr
与所选的
timeArr
相同，则将
id=“focus”
添加到div中，然后只需
document.getElementById（'focus'）。scrollIntoView（true）
您应该使用JQuery时间选择器来解决此问题。一行代码可以解决您的问题。你可以在这里下载并阅读文档

例如，此代码将为您提供所需的输出

$('#basicExample').timepicker();

这个开源项目在Github上也有很好的文档记录，我建议您在那里阅读它
为什么不使用“选择”和“选项”？我可能只是遗漏了一些东西，但我认为你的问题标题与你的问题不匹配。为什么你不只是使用JQuyYS时间选择器功能还考虑将最接近当前选择的值放置在中间，而不是在顶部。不能从引导程序中使用多个选择组件吗？根据您的口味进行定制会更容易。谢谢您的努力，但请查看我在原始问题中的评论。对不起，我的不好，我会努力的，如果我得到什么，我会回来的。感谢问题已经有了解决方案，请参阅问题中的最后一条评论。如果我没有使用jQuery timepicker，我相信我可以用您的答案解决我的问题。谢谢
.timepicker-select-box {
    background-color: white;
    border: 1px solid #999;
    cursor: default;
    font-size: 12px;
    height: 140px;
    line-height: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    text-align: center;
    width: 70px;
    z-index: 1000;
}

<label for="select-choice-etime">Earliest acceptable time:</label>
<select name="select-choice-etime" id="select-choice-etime">
<option value="12:00 AM">12:00 AM</option>
<option value="12:30 AM">12:30 AM</option>
<option value="1:00 AM">1:00 AM</option>
<option value="1:30 AM">1:30 AM</option>
<option value="2:00 AM">2:00 AM</option>
<option value="2:30 AM">2:30 AM</option>
<option value="3:00 AM">3:00 AM</option>
<option value="3:30 AM">3:30 AM</option>
<option value="4:00 AM">4:00 AM</option>
<option value="4:30 AM">4:30 AM</option>
<option value="5:00 AM">5:00 AM</option>
<option value="5:30 AM">5:30 AM</option>
<option value="6:00 AM">6:00 AM</option>
<option value="6:30 AM">6:30 AM</option>
<option value="7:00 AM">7:00 AM</option>
<option value="7:30 AM">7:30 AM</option>
<option value="8:00 AM">8:00 AM</option>
<option value="8:30 AM">8:30 AM</option>
<option value="9:00 AM">9:00 AM</option>
<option value="9:30 AM">9:30 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="11:30 AM">11:30 AM</option>
<option value="12:00 PM">12:00 PM</option>
<option value="12:30 PM">12:30 PM</option>
<option value="1:00 PM">1:00 PM</option>
<option value="1:30 PM">1:30 PM</option>
<option value="2:00 PM">2:00 PM</option>
<option value="2:30 PM">2:30 PM</option>
<option value="3:00 PM">3:00 PM</option>
<option value="3:30 PM">3:30 PM</option>
<option value="4:00 PM">4:00 PM</option>
<option value="4:30 PM">4:30 PM</option>
<option value="5:00 PM">5:00 PM</option>
<option value="5:30 PM">5:30 PM</option>
<option value="6:00 PM">6:00 PM</option>
<option value="6:30 PM">6:30 PM</option>
<option selected="selected" value="7:00 PM">7:00 PM</option>
<option value="7:30 PM">7:30 PM</option>
<option value="8:00 PM">8:00 PM</option>
<option value="8:30 PM">8:30 PM</option>
<option value="9:00 PM">9:00 PM</option>
<option value="9:30 PM">9:30 PM</option>
<option value="10:00 PM">10:00 PM</option>
<option value="10:30 PM">10:30 PM</option>
<option value="11:00 PM">11:00 PM</option>
<option value="11:30 PM">11:30 PM</option>
</select>

function getNearestHalfHourTimeString() {
var now = new Date();
var hour = now.getHours();
var minutes = now.getMinutes();
var ampm = "AM";
if (minutes < 15) {
    minutes = "00";
} else if (minutes < 45){
    minutes = "30";
} else {
    minutes = "00";
    ++hour;
}
if (hour > 23) {
    hour = 12;
} else if (hour > 12) {
    hour = hour - 12;
    ampm = "PM";
} else if (hour == 12) {
    ampm = "PM";
} else if (hour == 0) {
    hour = 12;
}

return(hour + ":" + minutes + " " + ampm);
}

$('#select-choice-etime option').removeAttr('selected');

$('#select-choice-etime option[value="' + getNearestHalfHourTimeString() + '"]').attr('selected', 'selected');

$('#basicExample').timepicker();