自定义年月选择器初始化异常问题求助

嘿，我太懂你这种“逻辑看着没问题，但一初始化就出bug”的烦躁了！咱们来好好拆解下你遇到的问题：

问题根源 #

页面加载时你先调用了updateYearOptions()，再调用updateMonthOptions()。这时候updateYearOptions执行时，月份选择器还没被设置为当前月（七月），它拿到的是<select>默认的第一个选项值1（一月）。这时候selectedMonth < currentMonth（1 < 7）成立，所以2023年被标记为禁用。接着代码发现selectedYear（2023）是禁用状态，就把yearToSelect改成了2024，导致初始化后显示2024。

而当你切换到其他月份再切回七月时，月份选择器已经是七月了，selectedMonth等于currentMonth，这时候不会禁用2023年，所以就能正常选中它了。

修复方案 #

核心就是调整初始化时的函数执行顺序，先设置好当前月份，再生成年份选项；同时确保年份禁用的判断逻辑只在选中月份小于当前月时生效。

修改后的完整代码如下：

HTML

<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>

CSS

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

#datepicker {
  width: 400px;
  padding: 10px;
  border: 1px solid #ccc;
}

JavaScript

let selectedYear = new Date().getFullYear();

function updateYearOptions() {
  const currentMonth = new Date().getMonth() + 1;
  const selectedMonth = parseInt(document.getElementById('month').value);
  const yearSelect = document.getElementById('year');
  const currentYear = new Date().getFullYear();
  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;
    }

    // 只有原本选中的年份被禁用时，才切换到下一年
    if (year === selectedYear && option.disabled) {
      yearToSelect = year + 1;
    }

    yearSelect.appendChild(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);
  document.getElementById('selectedYear').value = selectedYear;
}

修复说明 #

1. 调整初始化顺序：先调用updateMonthOptions()把月份设置为当前月，再调用updateYearOptions()，这样生成年份时selectedMonth已经是正确的当前月，不会错误禁用2023年。
2. 逻辑一致性：年份禁用的判断逻辑没有改动，只是确保初始化时拿到的是正确的月份值，后续用户切换月份时的逻辑依然正常工作。

这样页面加载时就会默认显示当前月（七月）和当前年（2023），而且不会出现初始化时当前年被禁用的问题啦！

备注：内容来源于stack exchange，提问作者Afzal Hamdulay