如何通过选择当前或未来年份来启用和禁用月份

Question

我是编程界的新手，

我想设置如果您选择了当前年份，那么必须禁用过去的月份。但是当您选择明年或以后的一年时，月份应该是可用的 1 到 12。

例如， 今天是2021年3月， 那么应该在选择选项中禁用选项 1 和 2。

但如果我在一年中选择 2022 年，那么从 1 到 12 的月份应该启用...

var i, currentYear, startYear, endYear, newOption, dropdownYear;
dropdownYear = document.getElementById("expyear");
currentYear = (new Date()).getFullYear();
startYear = currentYear;
endYear = currentYear + 14;

for (i = startYear; i <= endYear; i++) {
    newOption = document.createElement("option");
    newOption.value = i;
    newOption.label = i;

    dropdownYear.appendChild(newOption);
}

<label for="expmonth">Exp Month</label>
<select style="width: auto; display: inline;" name="expmonth" id="expmonth">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
   <option value="6">6</option>
   <option value="7">7</option>
   <option value="8">8</option>
   <option value="9">9</option>
   <option value="10">10</option>
   <option value="11">11</option>
   <option value="12">12</option>
 </select>
<label for="expyear">Exp Year</label>
<select style="width: auto; display: inline;" name="expyear" id="expyear"> 
</select>

Answer 1

您可以通过聆听当年的变化事件来实现这一点。

一旦年份中的值发生更改，请检查

1. 如果选择的年份值是当前年份。
2. 遍历当月的所有选项，检查选项中的值是否小于当前月份。

var i, currentYear, startYear, endYear, newOption, dropdownYear;
dropdownYear = document.getElementById("expyear");
currentYear = (new Date()).getFullYear();
startYear = currentYear;
endYear = currentYear + 14;

for (i = startYear; i <= endYear; i++) {
    newOption = document.createElement("option");
    newOption.value = i;
    newOption.label = i;

    dropdownYear.appendChild(newOption);
}

var year_select = document.getElementById('expyear');
var month_select = document.getElementById('expmonth');

var today = new Date();
var yearChanged = function () {
  month_select.value = 12; // reset the month to 12 ( to be safe )
  month_select.querySelectorAll('option').forEach(function (op) {
    if (year_select.value == today.getFullYear() && op.getAttribute('value') < today.getMonth() + 1) {
      op.setAttribute('disabled', 'disabled'); // disable the option as it is less than current month and year.
    }
    else {
      op.removeAttribute('disabled'); // enabled the date as greater than the current month or year.
    }
  });
};

yearChanged(); // call the function initally to set the disabled options for current year.

year_select.addEventListener('change', yearChanged, true); // event listening.

<label for="expmonth">Exp Month</label>
<select style="width: auto; display: inline;" name="expmonth" id="expmonth">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
   <option value="6">6</option>
   <option value="7">7</option>
   <option value="8">8</option>
   <option value="9">9</option>
   <option value="10">10</option>
   <option value="11">11</option>
   <option value="12">12</option>
 </select>
<label for="expyear">Exp Year</label>
<select style="width: auto; display: inline;" name="expyear" id="expyear"> 
</select>