如何使select下拉菜单中选中的月份选项显示在顶部？

当然有办法实现这个需求！我给你分享两种简单有效的JavaScript方案，帮你把选中的选项自动滚动到下拉菜单的顶部：

方案一：利用scrollTop手动控制滚动 #

这种方法通过计算选中选项的位置，直接设置select元素的滚动距离：

首先是你的HTML结构（假设已经生成好从2017年1月开始的月份选项）：

<select id="monthSelector">
  <!-- 动态生成的月份选项，例如：<option value="2017-01">2017年1月</option> -->
</select>

然后添加JavaScript逻辑：

const monthSelect = document.getElementById('monthSelector');

// 监听select的点击事件
monthSelect.addEventListener('click', function() {
  // 获取当前选中的选项
  const selectedOption = this.options[this.selectedIndex];
  // 将select的滚动距离设置为选中选项的顶部偏移量，让它滚到菜单顶部
  this.scrollTop = selectedOption.offsetTop;
});

方案二：使用scrollIntoView方法（更简洁） #

scrollIntoView是浏览器原生提供的DOM方法，可以直接让元素滚动到容器的可视区域内，配置参数就能让它对齐到顶部：

const monthSelect = document.getElementById('monthSelector');

monthSelect.addEventListener('click', function() {
  this.options[this.selectedIndex].scrollIntoView({
    block: 'start', // 指定元素对齐到容器的顶部
    behavior: 'auto' // 滚动行为，可选'smooth'实现平滑滚动
  });
});

注意事项 #

• 如果你的月份选项是动态生成的，记得要在选项生成完成后再绑定点击事件，否则可能无法获取到正确的DOM元素。
• 部分浏览器的原生select组件可能有默认的滚动逻辑，但这两种方法基本能覆盖绝大多数主流浏览器的场景。

内容的提问来源于stack exchange，提问作者user2014429