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

Question

我有一个表，其中包含从 1 月到 12 月的月份，值从 1 到 12。在我的页面上，我有一个下拉列表，其中包含从当年开始的年份。我还有另一个显示月份的下拉菜单。

通过设置当前月份，我可以获得月份的下拉列表以显示当前月份和一年中的剩余月份。我需要帮助的是月份下拉列表显示根据从 dropdwon 年份中选择的年份剩余的可用月份。也就是说，如果我选择 2019 年，我应该只能看到 12 月(当月和一年中的最后一个月)。如果我选择 2020 年，我应该看到 1 月到 12 月。

我检查了其他解决方案，但它对我的需要没有帮助。看到的一些解决方案将月份名称作为数组，但不包括相应的值。

我的 php 代码如下:

$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);

html代码如下:

<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

如果您不想使用 AJAX，我可能建议使用以下解决方法:

1. 使用“month-${year}”等 ID 在表单外部呈现所有可能的选择月份输入，并设置 style.display:none。
2. 在选择年份输入中进行 onChange - 将所需的选择月份复制(或移动)到表单中并取消隐藏。