本文介绍使用 JavaScript 动态生成包含“当前年份前1年 + 当前后5年”共6个年份选项的 <select> 下拉框，支持响应式更新、语义化结构和无障碍访问。
本文介绍使用 javascript 动态生成包含“当前年份前1年 + 当前后5年”共6个年份选项的 `
在表单开发中，硬编码年份选项（如 <option value="2020">2020</option>）不仅维护成本高，还无法随时间自动更新。为提升可维护性与用户体验，推荐使用 JavaScript 动态生成年份范围。以下方案以「当前年份前1年 + 当前后5年」共6个年份（例如：2023–2029）为例，提供简洁、健壮、无依赖的实现方式。
✅ 推荐实现（原生 JavaScript，无需 jQuery）
<div class="col-12">
<label for="year-select" class="form-label visually-hidden">选择年份</label>
<select id="year-select" class="form-select bg-light border-0" style="height: 55px;">
<option value="" disabled selected>请选择年份</option>
</select>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const select = document.getElementById('year-select');
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>? 说明：该方案使用 DOMContentLoaded 确保 DOM 加载完成后再操作；通过 createElement 创建 <option> 元素，避免字符串拼接带来的 XSS 风险；同时添加 <label> 提升可访问性（配合 visually-hidden 类隐藏但保留屏幕阅读器支持）。
⚠️ 注意事项
- 不要混用 jQuery 与原生 DOM 操作：原答案中混合使用 jQuery（$('#select1')）和未声明的 $ 变量，易引发运行时错误（如 $ is not defined），且引入 jQuery 增加额外加载负担。
- 避免重复渲染：确保 <select> 初始为空或仅含占位选项（如 disabled selected），防止多次执行脚本导致年份重复。
-
服务端补充（PHP 可选）：若需 SSR 支持（如 SEO 或 JS 禁用场景），可用 PHP 生成初始选项：
<?php $current = date('Y'); $start = $current - 1; $end = $current + 5; ?> <select id="year-select" class="form-select ..."> <option value="" disabled selected>请选择年份</option> <?php for ($y = $start; $y <= $end; $y++): ?> <option value="<?= htmlspecialchars($y) ?>"><?= $y ?></option> <?php endfor; ?> </select>
✅ 总结
动态生成年份下拉框的核心在于：以当前年份为基准，计算边界值，循环创建选项元素。优先采用原生 JavaScript 实现，兼顾性能、安全与兼容性；必要时辅以 PHP 渲染初始状态。最终效果既保证数据时效性，又符合现代 Web 开发最佳实践——语义化、可访问、无冗余依赖。
