我想做一个自定义的月份和年份选择器。我知道有插件。但我想要一个简单的月份和年份选择器。在这段代码中，如果用户选择的月份小于当前月份，我将禁用2023年。代码看起来很完美，但有一个小问题。
1.页面加载的年份应该显示为2023年，但它显示为2024年。
1.当用户选择当前月份（7月）时，当前年份（2023年）将被禁用。这不应该发生但是这仅在页面被加载时的开始发生。但是如果用户再次从另一个月切换到7月，则用户能够选择2023。以这个场景为例：用户打开页面。2024年7月不是2023年7月现在用户点击年份，2023被禁用。现在用户点击月份并选择11月。然后在选择11月之后，他再次选择7月，现在2023年是可选择的。理解这种情况意味着问题仅在页面加载时开始。

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; // Store the year to select (might change below)

  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; // If selected year is disabled, set the yearToSelect to the next available year
    }

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

updateYearOptions();
updateMonthOptions();

function updateSelectedYear() {
  selectedYear = parseInt(document.getElementById('year').value);
  document.getElementById('selectedYear').value = selectedYear;
}

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

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

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