js实现年月日表单三级联动

下面是JS实现年月日表单三级联动的完整攻略：

1. 确定三个下拉框的HTML结构

三个下拉框分别表示年、月、日，因此需要在HTML文件中编写三个select元素的结构。可以给它们添加类名或者id方便后续的CSS和JS操作。

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

2. 编写JS代码，实现年月日三级联动

2.1. 对年份进行初始化

• 从当前年份往前推50年，到当前年份往后推50年之间循环遍历，添加年份选项卡；

function initYear() {
  let selectYear = document.querySelector('.year');
  let nowYear = new Date().getFullYear();
  for (let i = nowYear - 50; i <= nowYear + 50; i++) {
    let option = document.createElement('option');
    option.value = i;
    option.innerText = i;
    selectYear.appendChild(option);
  }
}
initYear();

• 给年份选项卡添加change事件。每当年份选项卡改变时，重新生成月份选项卡。

let selectYear = document.querySelector('.year');
selectYear.addEventListener('change', function () {
  initMonth(selectYear.value);
});

2.2. 月份选项卡与日选项卡的生成

• 初始化月份选项卡，给年份选项卡添加事件后调用。

function initMonth(year) {
  let selectMonth = document.querySelector('.month');
  selectMonth.innerHTML = '';
  for (let i = 1; i <= 12; i++) {
    let option = document.createElement('option');
    option.value = i;
    option.innerText = i;
    selectMonth.appendChild(option);
  }
  initDay(year, selectMonth.value);
}

• 给月份选项卡添加事件。每当月份选项卡改变时，重新生成日选项卡。

let selectMonth = document.querySelector('.month');
selectMonth.addEventListener('change', function () {
  let selectYear = document.querySelector('.year');
  initDay(selectYear.value, selectMonth.value);
});

• 初始化日份选项卡。

function initDay(year, month) {
  let selectDay = document.querySelector('.day');
  selectDay.innerHTML = '';
  let days = new Date(year, month, 0).getDate();
  for (let i = 1; i <= days; i++) {
    let option = document.createElement('option');
    option.value = i;
    option.innerText = i;
    selectDay.appendChild(option);
  }
}

3. 示例说明

下面是在一个网页中引入三个JS文件，从而通过三个下拉框选择生日的一个例子：

3.1. HTML结构

<!-- 省略一些其他元素 -->
<select class="year"></select>
<select class="month"></select>
<select class="day"></select>
<!-- 省略一些其他元素 -->
<script src="birthday_year.js"></script>
<script src="birthday_month.js"></script>
<script src="birthday_day.js"></script>

3.2. birthday_year.js （生成年份选项卡）

function initYear() {
  let selectYear = document.querySelector('.year');
  let nowYear = new Date().getFullYear();
  for (let i = nowYear - 50; i <= nowYear + 50; i++) {
    let option = document.createElement('option');
    option.value = i;
    option.innerText = i;
    selectYear.appendChild(option);
  }
}
initYear();

let selectYear = document.querySelector('.year');
selectYear.addEventListener('change', function () {
  initMonth(selectYear.value);
});

3.3. birthday_month.js （生成月份和日份选项卡）

function initMonth(year) {
  let selectMonth = document.querySelector('.month');
  selectMonth.innerHTML = '';
  for (let i = 1; i <= 12; i++) {
    let option = document.createElement('option');
    option.value = i;
    option.innerText = i;
    selectMonth.appendChild(option);
  }
  initDay(year, selectMonth.value);
}

let selectMonth = document.querySelector('.month');
selectMonth.addEventListener('change', function () {
  let selectYear = document.querySelector('.year');
  initDay(selectYear.value, selectMonth.value);
});

function initDay(year, month) {
  let selectDay = document.querySelector('.day');
  selectDay.innerHTML = '';
  let days = new Date(year, month, 0).getDate();
  for (let i = 1; i <= days; i++) {
    let option = document.createElement('option');
    option.value = i;
    option.innerText = i;
    selectDay.appendChild(option);
  }
}

3.4. birthday_day.js

此文件不需要新的代码，因为上文中已经包含了 initDay() 函数的定义。

这个例子中，我们通过三个JS文件实现了生成一个年月日表单三级联动功能，可以方便地选择生日信息。