纯JS实现出生日期[年月日]下拉菜单效果

下面是详细讲解纯JS实现出生日期[年月日]下拉菜单效果的攻略：

1. HTML结构

首先，我们需要在HTML页面中创建一个select元素，有3个下拉菜单选项分别代表出生日期的年、月、日。

<select id="year"></select>
<select id="month"></select>
<select id="day"></select>

2. JS实现

2.1 动态生成年月日下拉菜单选项

在JS文件中，我们可以使用for循环动态生成年、月、日的下拉菜单选项。以年份为例，从当前年份倒序到1900年，生成年份选项。

var yearSelect = document.getElementById("year");
var currentYear = new Date().getFullYear();  // 获取当前年份
for (var i = currentYear; i >= 1900; i--) {
  var option = document.createElement("option");
  option.value = i;  // 设定option的value值为年份
  option.text = i;
  yearSelect.appendChild(option);  // 添加至年份下拉菜单中
}

月份和日期的下拉菜单选项同理，但需要注意2月份不同年份的天数不同，需要做出判断并动态生成。

2.2 动态更新月份和日期的下拉菜单选项

在选取年份后，需要动态更新月份和日期下拉菜单选项。当用户选取年份下拉菜单选项时，通过onchange事件监听选项的变化，调用updateMonthAndDay()函数在月份和日期下拉菜单中动态生成选项。

yearSelect.onchange = updateMonthAndDay;

function updateMonthAndDay() {
  // 更新月份下拉菜单选项
  var currentYear = yearSelect.value;
  var monthSelect = document.getElementById("month");
  monthSelect.innerHTML = "";  // 清空已有的选项
  for (var i = 1; i <= 12; i++) {
    var option = document.createElement("option");
    option.value = i;  // 设定option的value值为月份
    option.text = i;
    monthSelect.appendChild(option);
  }

  // 更新日期下拉菜单选项
  var daySelect = document.getElementById("day");
  daySelect.innerHTML = "";  // 清空已有的选项
  var daysInMonth = new Date(currentYear, monthSelect.value, 0).getDate();
  for (var i = 1; i <= daysInMonth; i++) {
    var option = document.createElement("option");
    option.value = i;  // 设定option的value值为日期
    option.text = i;
    daySelect.appendChild(option);
  }
}

同样的，当用户选取月份下拉菜单选项时，也要动态更新日期下拉菜单选项。方法与更新年份的方法大同小异。

示例1

假如我们要在一个注册界面上添加出生日期选择的功能，此时可以参考上述的实现方法。代码见下：

<div>
  <label>出生日期：</label>
  <select id="year"></select>
  <select id="month"></select>
  <select id="day"></select>
</div>

var yearSelect = document.getElementById("year");
var monthSelect = document.getElementById("month");
var daySelect = document.getElementById("day");
var currentYear = new Date().getFullYear();  // 获取当前年份

// 动态生成年份选项
for (var i = currentYear; i >= 1900; i--) {
  var option = document.createElement("option");
  option.value = i;  // 设定option的value值为年份
  option.text = i;
  yearSelect.appendChild(option);
}

// 动态生成月份选项
for (var i = 1; i <= 12; i++) {
  var option = document.createElement("option");
  option.value = i;  // 设定option的value值为月份
  option.text = i;
  monthSelect.appendChild(option);
}

// 动态生成日期选项
function updateDay() {
  daySelect.innerHTML = "";
  var year = yearSelect.value;
  var month = monthSelect.value;
  var daysInMonth = new Date(year, month, 0).getDate();
  for (var i = 1; i <= daysInMonth; i++) {
    var option = document.createElement("option");
    option.value = i;
    option.text = i;
    daySelect.appendChild(option);
  }
}

yearSelect.onchange = updateDay;
monthSelect.onchange = updateDay;

// 当页面加载完成时，动态生成初始的日期选项
updateDay();

示例2

如果我们想要添加修改用户生日的功能，需要在数据库中查询出用户的出生日期并显示在下拉菜单中。代码见下：

<div>
  <label>修改出生日期：</label>
  <select id="year"></select>
  <select id="month"></select>
  <select id="day"></select>
  <button onclick="submit()">提交</button>
</div>

var yearSelect = document.getElementById("year");
var monthSelect = document.getElementById("month");
var daySelect = document.getElementById("day");
var currentYear = new Date().getFullYear();

// 从数据库中查询出用户的出生日期并显示在下拉菜单中
var birthYear = "1998";
for (var i = currentYear; i >= 1900; i--) {
  var option = document.createElement("option");
  option.value = i;
  option.text = i;
  if (birthYear === String(i)) {
    option.selected = true;  // 设置默认选中出生年份
  }
  yearSelect.appendChild(option);
}

var birthMonth = "5";
for (var i = 1; i <= 12; i++) {
  var option = document.createElement("option");
  option.value = i;
  option.text = i;
  if (birthMonth === String(i)) {
    option.selected = true;  // 设置默认选中出生月份
  }
  monthSelect.appendChild(option);
}

var birthDay = "7";
daySelect.innerHTML = "";
var daysInMonth = new Date(birthYear, birthMonth, 0).getDate();
for (var i = 1; i <= daysInMonth; i++) {
  var option = document.createElement("option");
  option.value = i;
  option.text = i;
  if (birthDay === String(i)) {
    option.selected = true;  // 设置默认选中出生日期
  }
  daySelect.appendChild(option);
}

// 提交用户修改的出生日期
function submit() {
  var newBirthYear = yearSelect.value;
  var newBirthMonth = monthSelect.value;
  var newBirthDay = daySelect.value;

  // 提交修改到数据库等后端处理
}