HTML Select控件打开时如何将选中索引定位至当前年份？

这个需求完全可以实现，无需修改现有下拉框的基础结构，仅需添加少量JavaScript逻辑即可适配移动端场景，完全匹配你提到的交互要求。

实现思路 #

原生<select>控件展开时，会默认滚动到当前选中的<option>所在位置，我们可以利用这个特性实现定位需求：

• 用户点击下拉框触发展开时，临时将当前年份的选项设为选中状态，触发列表滚动到对应位置
• 异步重置选中状态为默认的「Select Year」，保证控件显示的默认值不变
• 用户可以直接在当前年份位置前后滚动选择，不需要滑过所有往年选项

示例代码 #

const yearSelect = document.getElementById('year');
// 获取当前年份
const currentYear = new Date().getFullYear().toString();

// 监听移动端select的触发事件（focus/click双监听保证兼容安卓、iOS）
['focus', 'click'].forEach(evt => {
  yearSelect.addEventListener(evt, () => {
    // 仅当当前选中的是默认空选项时执行定位逻辑
    if (yearSelect.value === '') {
      // 临时选中当前年份，触发下拉列表滚动到对应位置
      yearSelect.value = currentYear;
      // 异步重置选中状态，避免控件实际显示值变成当前年份
      setTimeout(() => {
        yearSelect.value = '';
      }, 0);
    }
  })
})

// 失去焦点时如果用户未选择有效年份，保持默认显示
yearSelect.addEventListener('blur', () => {
  if (yearSelect.value === '') {
    yearSelect.selectedIndex = 0;
  }
})

方案优势 #

• 完全基于原生控件，不需要引入第三方组件，适配所有智能手机、平板设备的原生下拉交互
• 不改变原有非必填、默认显示「Select Year」的产品规则
• 代码量极小，无额外性能损耗，兼容所有主流移动端浏览器

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