选择特定月份时动态展示对应天数功能异常排查求助

问题根因 #

• 切换月份时没有清空天数下拉框的已有内容，多次切换后不同月份的天数会叠加，导致只有首次选择的几个月份看起来正常
• 代码冗余度高，三个生成天数的函数逻辑高度重复，维护成本高
• switch分支内对$months.value的重复赋值是无效冗余操作
• 原有实现没有兼容闰年2月的29天场景

修复方案 #

优化后HTML代码（将月份value改为1-12的数字，更符合业务逻辑） #

<select id="months" name="months">
    <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>
<select id="days" name="days"></select>

修复后JS代码 #

const $months = document.getElementById('months')
const $days = document.getElementById('days')

// 统一渲染天数列项
function renderDays(daysCount) {
    // 清空已有内容，避免叠加
    $days.innerHTML = ''
    for (let i = 1; i <= daysCount; i++) {
        const option = document.createElement('option')
        option.value = i
        option.textContent = i
        $days.appendChild(option)
    }
}

// 自动获取指定月份的天数，原生API自动适配闰年
function getDaysOfMonth(month, year = new Date().getFullYear()) {
    return new Date(year, month, 0).getDate()
}

// 初始化默认加载第一个月的天数
renderDays(getDaysOfMonth($months.value))

// 月份切换事件监听
$months.addEventListener('change', function(){
    renderDays(getDaysOfMonth(this.value))
})

修复说明 #

1. 每次渲染天数列项前先清空旧内容，彻底解决天数叠加的问题
2. 复用统一的工具函数，减少冗余代码，后续维护只需要修改一处逻辑即可
3. 调用JS原生Date API自动计算每月天数，不需要手动写分支判断，自动适配闰年2月的29天，准确率更高
4. 提前缓存DOM对象，避免循环中重复查询DOM，提升运行性能

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