根据在另一个选择下拉列表中选择的年份动态显示选择下拉列表中剩余的可用月份

Question

I have a table that has the months from January to December with values 1 to 12. On my page i have a dropdown with years from current year. I also have another dropdown that displays the months.

By setting the current month, I can get the dropdown of months to display current month and the remaining month of the year. What I need help for is for the month dropdown to display available months remaining based on year selected from the year dropdwon. That is if I select 2019, I should see only December(current month and last month of year). If I pick 2020, I should see January to December.

I have checked other solutions, but it does not help with what I need. Some of the solutions seen have the month names as an array but the corresponding values are not included.

My php code below:

$curmonth = date('n');

$query = "SELECT calmonthsID, months, value from calmonths WHERE value>=? ORDER BY calmonthsID ASC";
$stmt = $connQlife->prepare($query);
$stmt->bind_param('s', $curmonth);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($calmonthsID, $months, $value);

The html code below:

<select name="year" id="year" value="" tabindex="1" aria-hidden="true" required style="height:50px;display: block;padding:10px;" class="h5">
   <option value="" selected="selected">- Select Year -</option>
   <option value="2019">2019</option>
   <option value="2020">2020</option>
   <option value="2021">2021</option>
   <option value="2022">2022</option>
</select>

<select name="month" id="month" value="" tabindex="1" aria-hidden="true" required style="height:50px;display: block;padding:10px;" class="h5">
    <option value="" selected="selected">- Select One -</option>
    <?php while($stmt->fetch()) { ?>
        <option value=<?Php echo $value; ?>><?Php echo $months; ?></option>                             
    <?php } $stmt->close(); ?>
</select>

Answer 1

If you don't want to use AJAX, I may suggest following workaround:

1. Render all possible select-month inputs outside of the form with ids like `month-${year}` and set style.display:none .
2. In select-year input make onChange - copy (or move) needed select-month into form & unhide it.