js实现日期级联效果

当我们需要在日期选择器中实现级联效果时，需要知道选择器之间的依赖关系，例如年份选择器与月份选择器、月份选择器与日期选择器的关系。在JavaScript中，我们可以通过以下几个步骤来实现日期级联效果：

1. 获取DOM元素

首先需要获取到页面上对应的DOM元素，为每个日期选择器都添加一个id，例如：

<select id="year">
  <option value="2021">2021</option>
  <option value="2022">2022</option>
</select>
<select id="month">
  <option value="01">01</option>
  <option value="02">02</option>
  <option value="03">03</option>
  <!--...省略其他月份选项...-->
</select>
<select id="day">
  <!--...省略日期选项...-->
</select>

然后在JavaScript中，通过document.getElementById()方法获取这些DOM元素：

const yearSelect = document.getElementById('year');
const monthSelect = document.getElementById('month');
const daySelect = document.getElementById('day');

2. 事件监听

接下来需要对选择器添加变化事件监听器，例如当年份选择器的值发生变化时，需要触发更新月份和日期。这时候可以监听change事件，例如：

yearSelect.addEventListener('change', updateMonthAndDay);

同理，当月份选择器的值发生变化时，需要触发更新日期：

monthSelect.addEventListener('change', updateDay);

3. 动态生成选项

当年份或者月份选择器的值发生变化时，我们需要动态生成并更新下一个选择器的选项。例如当年份选择器的值发生变化时，需要动态生成下一个月份选择器中的选项：

function updateMonthOptions() {
  const selectedYear = yearSelect.value; // 获取当前选择的年份
  const optionCount = 12; // 月份的总数
  for (let i = 1; i <= optionCount; i++) {
    const month = `${i < 10 ? '0' : ''}${i}`; // 将数字转换成两位数的字符串，例如1变成01
    const newOption = new Option(month, month); // 创建一个新的选项，value和text都是月份
    monthSelect.add(newOption); // 将新选项添加到月份选择器中
  }
}

同理，当月份选择器的值发生变化时，需要动态生成下一个日期选择器中的选项。这里需要注意的是，不同的月份的日期数是不同的，因此需要获取当前选择的年份和月份，然后根据这两个值动态生成日期列表：

function updateDayOptions() {
  const selectedYear = yearSelect.value; // 获取当前选择的年份
  const selectedMonth = monthSelect.value; // 获取当前选择的月份
  const daysInMonth = new Date(selectedYear, selectedMonth, 0).getDate(); // 获取当前月份的天数
  for (let i = 1; i <= daysInMonth; i++) {
    const day = `${i < 10 ? '0' : ''}${i}`; // 将数字转换成两位数的字符串，例如1变成01
    const newOption = new Option(day, day); // 创建一个新的选项，value和text都是日期
    daySelect.add(newOption); // 将新选项添加到日期选择器中
  }
}

示例说明

以下是两个具体的示例：

示例1

在该示例中，我们需要实现一个日期选择器，当选择年份时，自动更新月份和日期的选项。这个示例的完整代码如下：

<select id="year">
  <option value="2021">2021</option>
  <option value="2022">2022</option>
</select>
<select id="month">
  <!-- month options will be generated dynamically -->
</select>
<select id="day">
  <!-- day options will be generated dynamically -->
</select>

<script>
  const yearSelect = document.getElementById('year');
  const monthSelect = document.getElementById('month');
  const daySelect = document.getElementById('day');

  yearSelect.addEventListener('change', updateMonthAndDay);

  function updateMonthAndDay() {
    // first, remove all existing options
    monthSelect.innerHTML = '';
    daySelect.innerHTML = '';
    // generate month options
    updateMonthOptions();
    // then, generate day options
    updateDayOptions();
  }

  function updateMonthOptions() {
    const selectedYear = yearSelect.value; // 获取当前选择的年份
    const optionCount = 12; // 月份的总数
    for (let i = 1; i <= optionCount; i++) {
      const month = `${i < 10 ? '0' : ''}${i}`; // 将数字转换成两位数的字符串，例如1变成01
      const newOption = new Option(month, month); // 创建一个新的选项，value和text都是月份
      monthSelect.add(newOption); // 将新选项添加到月份选择器中
    }
  }

  function updateDayOptions() {
    const selectedYear = yearSelect.value; // 获取当前选择的年份
    const selectedMonth = monthSelect.value; // 获取当前选择的月份
    const daysInMonth = new Date(selectedYear, selectedMonth, 0).getDate(); // 获取当前月份的天数
    for (let i = 1; i <= daysInMonth; i++) {
      const day = `${i < 10 ? '0' : ''}${i}`; // 将数字转换成两位数的字符串，例如1变成01
      const newOption = new Option(day, day); // 创建一个新的选项，value和text都是日期
      daySelect.add(newOption); // 将新选项添加到日期选择器中
    }
  }
</script>

示例2

在该示例中，我们需要实现一个日期选择器，当选择月份时，自动更新日期的选项。这个示例的完整代码如下：

<select id="year">
  <option value="2021">2021</option>
  <option value="2022">2022</option>
</select>
<select id="month">
  <option value="01">01</option>
  <option value="02">02</option>
  <option value="03">03</option>
  <!--...省略其他月份选项...-->
</select>
<select id="day">
  <!-- day options will be generated dynamically -->
</select>

<script>
  const yearSelect = document.getElementById('year');
  const monthSelect = document.getElementById('month');
  const daySelect = document.getElementById('day');

  monthSelect.addEventListener('change', updateDay);

  function updateDay() {
    // first, remove all existing options
    daySelect.innerHTML = '';
    // then, generate day options
    updateDayOptions();
  }

  function updateDayOptions() {
    const selectedYear = yearSelect.value; // 获取当前选择的年份
    const selectedMonth = monthSelect.value; // 获取当前选择的月份
    const daysInMonth = new Date(selectedYear, selectedMonth, 0).getDate(); // 获取当前月份的天数
    for (let i = 1; i <= daysInMonth; i++) {
      const day = `${i < 10 ? '0' : ''}${i}`; // 将数字转换成两位数的字符串，例如1变成01
      const newOption = new Option(day, day); // 创建一个新的选项，value和text都是日期
      daySelect.add(newOption); // 将新选项添加到日期选择器中
    }
  }
</script>