如何在页面加载时动态修改HTML select元素的默认选中选项

实现方案 #

完全可以动态修改select的默认选中值，只需要在页面加载完成时执行对应的赋值逻辑即可，具体实现如下： #

核心逻辑说明 #

• 要确保DOM渲染完成后再操作select元素，避免出现获取不到元素的报错
• 可以直接通过给select元素.value赋值的方式修改选中项，也可以手动给对应option添加selected属性
• 获取当前月份可以用原生JS的Date API，也可以用你提到的moment库

完整实现代码（原生JS版本，无额外依赖） #

<body>
    <select id="month" onchange="setMonth();">
        <option value='1' selected>1</option>
        <option value='2'>2</option>
        <option value='3'>3</option>
        <option value='4'>4</option>
    </select>

    <script>
        var month = document.getElementById('month');
        var monthValue = month.options[month.selectedIndex].value.padStart(2, '0');

        function setMonth() {
            monthValue = month.options[month.selectedIndex].value.padStart(2, '0');
        }

        // 页面加载完成后执行默认选中逻辑
        window.onload = function() {
            // 原生获取当前月份：getMonth返回0-11，+1后转为1-12的常规月份格式
            const currentMonth = new Date().getMonth() + 1;
            // 直接给select赋值，会自动匹配对应value的option为选中状态
            month.value = currentMonth;
            // 同步更新全局的monthValue变量
            monthValue = String(currentMonth).padStart(2, '0');
        }
    </script>
</body>

moment库版本替换逻辑 #

如果使用moment库处理时间，仅需要替换window.onload中获取当前月份的代码即可：

// moment的month方法同样返回0-11的数值，需要+1转为常规月份格式
const currentMonth = moment().month() + 1;

边界兼容处理 #

如果你的select可选月份范围有限（比如示例中仅提供1-4月选项），可以加一层存在性判断，匹配不到对应选项时保留原有默认选中值：

window.onload = function() {
    const currentMonth = new Date().getMonth() + 1;
    // 判断是否存在对应value的option
    const hasOption = Array.from(month.options).some(opt => opt.value == currentMonth);
    if (hasOption) {
        month.value = currentMonth;
        monthValue = String(currentMonth).padStart(2, '0');
    }
}

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