如何动态生成年份选择下拉框（含当前年及前后5年）-php教程-PHP中文网

如何动态生成年份选择下拉框（含当前年及前后5年）

本文介绍使用 JavaScript 动态生成 HTML 年份选项的方法，支持自动计算并渲染「前1年 + 当前年 + 后5年」共7个年份选项，避免硬编码，提升可维护性与国际化适配能力。

本文介绍使用 javascript 动态生成 html `

在表单开发中，年份选择器常需动态展示合理的时间范围（如仅显示「去年、今年及未来五年」），而非静态写死的年份列表。手动维护

以下为标准实现方案（兼容现代浏览器，无需 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-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

✅ 零依赖：纯原生 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 ?></option>
<?php endfor; ?></select>

避免在 for 循环中频繁调用 appendChild()（已优化为单次 DOM 批量操作）；实际项目中若选项极多（>100），建议使用 DocumentFragment 进一步优化性能。