如何在需填写生日的注册页中实现出生年份select下拉选择框

实现逻辑非常简单：通过脚本动态生成年份option项插入到空的select容器中即可，无需手动编写上百个option标签。

基础HTML结构 #

先在页面中预留年份选择的select容器：

<select id="birthYear" name="birthYear" required>
  <option value="">请选择出生年份</option>
</select>

原生JavaScript实现 #

不需要引入任何第三方依赖，直接用原生API实现：

const yearSelect = document.getElementById('birthYear');
const currentYear = new Date().getFullYear();
// 倒序遍历，把更近的年份放前面，符合用户选择习惯
for (let year = currentYear; year >= 1900; year--) {
  const option = document.createElement('option');
  option.value = year;
  option.innerText = year;
  // 如果需要默认选中指定年份，增加以下判断即可
  // if (year === 2000) option.selected = true
  yearSelect.appendChild(option);
}

jQuery实现 #

如果你的项目已经引入了jQuery，代码可以更简洁：

const currentYear = new Date().getFullYear();
for (let year = currentYear; year >= 1900; year--) {
  $('#birthYear').append(`<option value="${year}">${year}</option>`);
}

可选优化点 #

• 可以和已有的月、日选择器做联动，根据选择的年份、月份动态调整日期的可选范围，避免出现2月30日、4月31日这类无效日期
• 如果需要限制最小/最大出生年份，直接修改循环的起始、结束阈值即可

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