本文介绍如何用原生 javascript 构建轻量、可定制的月年选择器，重点解决初始化时年份显示错误（如默认显示 2025 而非当前年 2025）及当前年被误禁用的问题，并提供完整可运行代码与关键逻辑解析。

在开发表单或日期筛选功能时，标准 无法满足仅选择“年+月”的需求，而引入大型 UI 库又显得过度。此时，一个简洁、可控的自定义月年选择器（Month-Year Picker）是理想方案。本文将带你从零实现一个纯原生、无依赖的解决方案，并精准修复两个常见初始化缺陷：

• ✅ 页面加载时，默认应显示「当前年 + 当前月」（如 2025 年 7 月），而非错误地显示 2025 年；
• ✅ 当用户选择当前月份（如 7 月）时，当前年（2025）必须始终可用，不可被意外禁用。

? 核心问题根源：执行顺序导致状态错位

原始代码中，updateYearOptions() 在 updateMonthOptions() 之前调用：

updateYearOptions(); // ❌ 此时 month  值仍为默认 1（January）
updateMonthOptions();
由于  初始值为 1（January），而当前月份是 7（July），条件 selectedMonth 
解法极其简洁：调整初始化顺序，确保月份先设为正确值，再生成年份选项。
✅ 修复后的完整实现



  



  
    Month:
    
      January
      February
      March
      April
      May
      June
      July
      August
      September
      October
      November
      December
    

    Year:
    
    
  

  



⚠️ 注意事项与增强建议


语义化与可访问性：为  添加 aria-label 或关联 （当前已正确使用 for 属性），提升屏幕阅读器支持；


动态范围扩展：如需支持历史年份（如出生年份），可将循环起始年改为 currentYear - 100，并添加 minYear 配置；

响应式交互：可增加 onfocus 事件，在点击年份下拉时自动触发 updateYearOptions()，确保每次展开都基于最新月份；

防重复提交：隐藏字段 #selectedYear 仅作数据传递，实际提交时建议组合 month 和 year 值（如 "2025-07"）以符合后端 API 规范。

此方案零依赖、体积小、逻辑清晰，既满足基础业务需求，又为后续定制（如国际化、主题切换、动画过渡）预留了充足空间。掌握其核心——状态初始化顺序 + 条件禁用策略——即可快速复用于各类时间维度筛选场景。