修复生日注册表单切换年份时二月日期选项不更新的问题

问题现象 #

• 需求为实现闰年二月日期适配：能被4整除的闰年（如2020年，判断逻辑为year % 4 == 0）二月显示29天，平年二月仅显示28天
• 异常表现：切换年份选项时，二月天数不会自动更新，例如选择2021年等平年时，日期下拉不会切回28天；但重新手动选择月份为二月时，逻辑可正常运行
• 调试特征：切换年份的回调中执行console.log(daysInMonth[1])可输出正确天数，但下拉选项未同步更新

问题根源 #

1. 年份下拉框事件绑定选择器错误：页面中年份选择器的id为select-year，原代码给不存在的#b_year元素绑定了change事件，事件触发逻辑不符合预期
2. 年份切换的回调中仅修改了daysInMonth数组的二月天数值，未调用setDays()方法重新渲染日期下拉的选项，修改后的值没有同步到DOM
3. 月份切换事件的逻辑顺序颠倒：先执行setDays()渲染日期，再更新二月天数，首次触发时会使用旧的天数配置

修复后代码 #

JS部分 #

var daysInMonth = [31,28,31,30,31,30,31,31,30,31,30,31],
    today = new Date(),
    // 默认目标日期为圣诞节
    targetDate = new Date(today.getFullYear(), 11, 25); 
window.onload = ()=>{
    setDate(targetDate); 
    setYears(60) // 下拉框加载最近60年
        
    // 月份切换时更新日期
    $("#select-month").change(function() {
        var monthIndex = parseInt($("#select-month").val());
        var year = parseInt($('#select-year').val());
        // 先更新二月天数
        daysInMonth[1] = (year % 4 == 0) ? 29 : 28;
        // 再渲染日期选项
        setDays(monthIndex);
    });
    
    // 修正选择器为#select-year，年份切换时更新日期
    $("#select-year").change( ()=>{ 
        var year = parseInt($('#select-year').val()); 
        var currentMonth = parseInt($("#select-month").val());
        // 更新二月天数
        daysInMonth[1] = (year % 4 == 0) ? 29 : 28;
        // 当前选中二月时重新渲染日期选项
        if(currentMonth === 1){
            setDays(currentMonth);
            // 闰年切到平年时，若之前选中29号自动调整为28号，避免空值
            if(parseInt($("#select-day").val()) > 28){
                $("#select-day").val(28);
            }
        }
    })

    function setDate(date) {
        var year = date.getFullYear();
        // 初始化时先更新二月天数
        daysInMonth[1] = (year % 4 == 0) ? 29 : 28;
        setDays(date.getMonth());
        $("#select-day").val(date.getDate());
        $("#select-month").val(date.getMonth());
        $("#select-year").val(date.getFullYear()); 
    }

    // 根据选中月份更新日期下拉选项
    function setDays(monthIndex) {
        var optionCount = $('#select-day option').length,
            daysCount = daysInMonth[monthIndex];
        
        if (optionCount < daysCount) {
            for (var i = optionCount; i < daysCount; i++) {
                $('#select-day').append($("<option></option>").attr("value", i + 1).text(i + 1)); 
            }
        }
        else {
            for (var i = daysCount; i < optionCount; i++) {
                var optionItem = '#select-day option[value=' + (i+1) + ']';
                $(optionItem).remove();
            } 
        } 
    }

    function setYears(val) {
        var year = today.getFullYear();
        for (var i = 0; i < val; i++) {
            $('#select-year')
                .append($("<option></option>")
                .attr("value", year - i)
                .text(year - i)); 
        }
    }
}

HTML部分 #

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select-date">
  <select id="select-day"></select>
  <select id="select-month">
      <option value="0">January</option>
      <option value="1">February</option>
      <option value="2">March</option>
      <option value="3">April</option>
      <option value="4">May</option>
      <option value="5">June</option>
      <option value="6">July</option>
      <option value="7">August</option>
      <option value="8">September</option>
      <option value="9">October</option>
      <option value="10">November</option>
      <option value="11">December</option>
  </select>
  <select id="select-year"></select>
</div>
<!-- 移除重复的jQuery引入和冗余本地脚本引用，避免加载冲突 -->

补充说明：当前使用的year % 4 == 0是简化版闰年判断逻辑，完整闰年规则为：能被4整除但不能被100整除，或能被400整除的年份为闰年，可根据业务需求调整判断条件。

内容的提问来源于stack exchange，提问作者jospert