本文介绍使用 JavaScript 动态生成 HTML <select> 年份选项的方法，支持自动计算并渲染「前1年 + 当前年 + 后5年」共7个年份选项，避免硬编码，提升可维护性与国际化适配能力。
本文介绍使用 javascript 动态生成 html `
在表单开发中，年份选择器常需动态展示合理的时间范围（如仅显示「去年、今年及未来五年」），而非静态写死的年份列表。手动维护 <option> 标签不仅易出错，还难以适配不同部署年份或时区环境。推荐采用 JavaScript 在运行时动态构建选项，确保逻辑清晰、可复用且无需后端介入。
以下为标准实现方案（兼容现代浏览器，无需 jQuery）：
<div class="col-12">
<select class="form-select bg-light border-0" id="yearSelect" style="height: 55px;">
<option value="" disabled selected>Select year</option>
</select>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const select = document.getElementById('yearSelect');
const currentYear = new Date().getFullYear();
// 生成年份范围：[currentYear - 1, currentYear + 5]
const startYear = currentYear - 1;
const endYear = currentYear + 5;
for (let year = startYear; year <= endYear; year++) {
const option = document.createElement('option');
option.value = year;
option.textContent = year;
// 默认选中当前年
if (year === currentYear) option.selected = true;
select.appendChild(option);
}
});
</script>✅ 关键特性说明：
- ✅ 零依赖：纯原生 JavaScript，不依赖 jQuery 或其他库；
- ✅ 语义正确：使用 textContent 而非 innerHTML 防止 XSS 风险；
- ✅ 默认选中：自动将当前年设为默认选中项；
- ✅ 可扩展性强：只需修改 startYear 和 endYear 即可调整范围（如改为「前3年+后10年」）；
- ✅ 时区安全：基于 new Date().getFullYear()，自动适配用户本地时区。
⚠️ 注意事项：
- 若需服务端渲染（如 SEO 敏感场景），可用 PHP 替代：
<select class="form-select bg-light border-0" id="yearSelect" style="height: 55px;"> <option value="" disabled selected>Select year</option> <?php $current = (int)date('Y'); for ($y = $current - 1; $y <= $current + 5; $y++): ?> <option value="<?= $y ?>" <?= $y === $current ? 'selected' : '' ?>><?= $y ?></option> <?php endfor; ?> </select> - 避免在 for 循环中频繁调用 appendChild()（已优化为单次 DOM 批量操作）；实际项目中若选项极多（>100），建议使用 DocumentFragment 进一步优化性能。
通过此方案，年份选择器既保持简洁性，又具备良好的健壮性与可维护性，是表单开发中的推荐实践。
