本文详解如何构建一个轻量、可维护的纯 javascript 年月选择器，重点解决初始化时年份默认值错误、当前年份被误禁用等常见逻辑缺陷，并提供健壮的初始化顺序与状态同步方案。
本文详解如何构建一个轻量、可维护的纯 javascript 年月选择器，重点解决初始化时年份默认值错误、当前年份被误禁用等常见逻辑缺陷，并提供健壮的初始化顺序与状态同步方案。
在开发表单或数据筛选功能时，一个仅需选择「年份 + 月份」（无需具体日期）的控件往往比完整日期选择器更简洁、语义更清晰。然而，手写此类选择器容易陷入状态同步陷阱——正如问题中所示：页面首次加载时显示为 July 2024 而非预期的 July 2023，且 2023 年在初始状态下被错误禁用。根本原因在于初始化执行顺序不当：updateYearOptions() 在 updateMonthOptions() 之前调用，导致月份下拉框仍保持默认值 1（January），而此时 selectedMonth < currentMonth（1 < 7）恒成立，从而错误禁用 2023 年。
✅ 正确的初始化顺序是关键
必须确保月份选择器先完成初始化（即设为当前月份），再生成年份选项。否则，年份逻辑将始终基于错误的 selectedMonth 值进行判断。修正后的初始化代码如下：
// ✅ 先设置月份，再生成年份选项 updateMonthOptions(); updateYearOptions();
? 完整可运行实现（含优化）
以下为修复后、生产就绪的完整代码，已增强鲁棒性与可读性：
<div id="datepicker">
<label for="month">Month:</label>
<select id="month" onchange="updateYearOptions()">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<label for="year">Year:</label>
<select id="year" onchange="updateSelectedYear()"></select>
<input type="hidden" id="selectedYear" name="selectedYear">
</div>let selectedYear = new Date().getFullYear();
function updateYearOptions() {
const now = new Date();
const currentYear = now.getFullYear();
const currentMonth = now.getMonth() + 1; // 1–12
const selectedMonth = parseInt(document.getElementById('month').value, 10);
const yearSelect = document.getElementById('year');
const maxYear = currentYear + 20;
yearSelect.innerHTML = ''; // 清空选项
let yearToSelect = selectedYear;
for (let year = currentYear; year <= maxYear; year++) {
const option = document.createElement('option');
option.value = year;
option.textContent = year;
// 禁用当前年份的条件：所选月份 < 当前月份（即未来月份不可选）
if (year === currentYear && selectedMonth < currentMonth) {
option.disabled = true;
}
// 若预设的 selectedYear 被禁用，则自动 fallback 到下一个可用年份
if (year === selectedYear && option.disabled) {
yearToSelect = year + 1;
}
}
// 批量添加选项后再统一赋值，避免重复渲染
for (let year = currentYear; year <= maxYear; year++) {
const option = document.createElement('option');
option.value = year;
option.textContent = year;
if (year === currentYear && selectedMonth < currentMonth) {
option.disabled = true;
}
yearSelect.appendChild(option);
}
// 最终设定选中值（注意：必须在所有 option 插入后执行）
yearSelect.value = yearToSelect;
selectedYear = yearToSelect;
document.getElementById('selectedYear').value = yearToSelect;
}
function updateMonthOptions() {
const monthSelect = document.getElementById('month');
const currentMonth = new Date().getMonth() + 1;
monthSelect.value = currentMonth;
}
// ✅ 初始化：务必先设月，再生成年选项
updateMonthOptions();
updateYearOptions();
function updateSelectedYear() {
selectedYear = parseInt(document.getElementById('year').value, 10);
document.getElementById('selectedYear').value = selectedYear;
}⚠ 注意事项与最佳实践
- 始终使用 parseInt(value, 10)：避免八进制解析风险（如 parseInt('08') 返回 0）；
- <select> 的 value 设置必须在所有 <option> 插入 DOM 后执行，否则可能无效；
- 禁用逻辑应严格限定为“当前年 + 早于当前月”，而非“当前年 + 小于等于当前月”，否则当月也会被禁用；
- 如需支持回显已保存值（如编辑场景），应在 updateMonthOptions() 和 updateYearOptions() 中增加参数接收外部状态，并在初始化后调用 updateSelectedYear() 同步隐藏字段；
- CSS 层面建议为禁用选项添加视觉提示（如 option:disabled { color: #999; }），提升可访问性。
通过以上结构化实现，你将获得一个行为精准、易于扩展、无初始化竞态问题的年月选择器——无需依赖第三方库，却具备生产环境所需的可靠性与可维护性。
