监听第一个下拉菜单的 change 事件，当用户选择年份时，发送 AJAX 请求获取该年份的所有月份数据，并将每个月份作为第二个下拉菜单的子菜单项添加到其中。但是当用户选择再重新选择其它年份时，第二个下拉菜单的子菜单中仍保存有第一次选择的年份监听到的月份数据。解决方法

可以在每次发送 AJAX 请求之前，先清空第二个下拉菜单的子菜单，再进行数据的添加。可以使用 jQuery 的 empty() 方法来清空子菜单。示例代码如下：

// 监听第一个下拉菜单的 change 事件
$('#year-select').on('change', function() {
  var year = $(this).val();
  
  // 发送 AJAX 请求获取月份数据
  $.ajax({
    url: 'getMonths.php',
    data: { year: year },
    success: function(data) {
      var months = JSON.parse(data);
      
      // 清空第二个下拉菜单的子菜单
      $('#month-select').empty();
      
      // 将每个月份添加到第二个下拉菜单的子菜单中
      $.each(months, function(index, month) {
        $('#month-select').append('<option value="' + month + '">' + month + '</option>');
      });
    }
  });
});

相关问题

监听第一个下拉菜单选择年份，获取数据库中该年份的数据中所有的月份数据，并作为第二个下拉菜单的子菜单；监听第二个下拉菜单选择月份，发送 AJAX 请求获取薪资记录

好的，这个需求可以通过以下代码实现：

首先，给第一个下拉菜单绑定 change 事件：

$('#year-select').on('change', function() {
  var year = $(this).val();
  // 发送 AJAX 请求获取该年份的所有月份数据
  $.ajax({
    url: '/get-months',
    data: { year: year },
    success: function(months) {
      // 清空第二个下拉菜单的子菜单
      $('#month-select').empty();
      // 将每个月份作为子菜单项添加到第二个下拉菜单中
      $.each(months, function(index, month) {
        var option = $('<option>').attr('value', month).text(month);
        $('#month-select').append(option);
      });
    }
  });
});

然后，给第二个下拉菜单绑定 change 事件：

$('#month-select').on('change', function() {
  var year = $('#year-select').val();
  var month = $(this).val();
  // 发送 AJAX 请求获取薪资记录
  $.ajax({
    url: '/get-salary',
    data: { year: year, month: month },
    success: function(salary) {
      // 显示薪资记录
      $('#salary').text(salary);
    }
  });
});

这里假设后端提供了 `/get-months` 和 `/get-salary` 两个接口，分别用于获取月份数据和薪资记录。在前端代码中，我们先监听第一个下拉菜单的 change 事件，当用户选择年份时，我们发送 AJAX 请求获取该年份的所有月份数据，并将每个月份作为第二个下拉菜单的子菜单项添加到其中。然后，我们再监听第二个下拉菜单的 change 事件，当用户选择月份时，我们发送 AJAX 请求获取薪资记录，并将其显示在页面上。

PHP页面有两个下拉菜单，监听第一个下拉菜单的 change 事件，当用户选择年份时，发送 AJAX 请求获取该年份的所有月份数据，并将获取到的月份作为第二个下拉菜单的子菜单项添加到其中。当用户选择再重新选择其它年份时，需要清空子菜单并重新获取新数据。当用户选择第二个下拉菜单的月份选项后，执行数据查询操作。生成完整代码

HTML 页面代码：

<select id="year">
  <option value="">请选择年份</option>
  <option value="2020">2020年</option>
  <option value="2021">2021年</option>
</select>

<select id="month">
  <option value="">请选择月份</option>
</select>

JavaScript 代码：

$(document).ready(function() {
  // 监听年份下拉菜单的 change 事件
  $('#year').change(function() {
    var year = $(this).val();
    if (year !== '') {
      // 发送 AJAX 请求获取该年份的所有月份数据
      $.ajax({
        url: 'get_months.php',
        type: 'GET',
        data: {year: year},
        dataType: 'json',
        success: function(data) {
          var options = '<option value="">请选择月份</option>';
          for (var i = 0; i < data.length; i++) {
            options += '<option value="' + data[i] + '">' + data[i] + '月</option>';
          }
          // 将获取到的月份作为第二个下拉菜单的子菜单项添加到其中
          $('#month').html(options);
        }
      });
    } else {
      // 如果未选择年份，则清空月份下拉菜单
      $('#month').html('<option value="">请选择月份</option>');
    }
  });

  // 监听月份下拉菜单的 change 事件
  $('#month').change(function() {
    var year = $('#year').val();
    var month = $(this).val();
    if (year !== '' && month !== '') {
      // 执行数据查询操作
      $.ajax({
        url: 'query_data.php',
        type: 'GET',
        data: {year: year, month: month},
        dataType: 'json',
        success: function(data) {
          // 处理查询结果
        }
      });
    }
  });
});

PHP 代码（get_months.php）：

<?php
if (isset($_GET['year'])) {
  $year = $_GET['year'];
  // 获取该年份的所有月份数据
  $months = array('01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12');
  echo json_encode($months);
}
?>

PHP 代码（query_data.php）：

<?php
if (isset($_GET['year']) && isset($_GET['month'])) {
  $year = $_GET['year'];
  $month = $_GET['month'];
  // 执行数据查询操作
  $data = array(/* 查询结果数组 */);
  echo json_encode($data);
}
?>