数据库中只有2022/09/01~2023/05/01的月度薪资发放记录。PHP页面有两个下拉菜单,监听第一个下拉菜单的 change 事件,当用户选择年份时,发送 AJAX 请求获取该年份的所有月份数据,并将获取到的月份作为第二个下拉菜单的子菜单项添加到其中。当用户选择再重新选择其它年份时,需要清空子菜单并重新获取新数据。当用户选择第二个下拉菜单的月份选项后,执行该年该月的薪资查询操作。生成完整代码
时间: 2024-02-03 22:12:30 浏览: 20
以下是一个基本的实现,使用了 jQuery 库:
HTML 页面代码:
```html
<label for="year-select">选择年份:</label>
<select id="year-select"></select>
<label for="month-select">选择月份:</label>
<select id="month-select"></select>
<button id="search-btn">查询</button>
```
jQuery 代码:
```javascript
// 监听年份下拉菜单的 change 事件
$('#year-select').change(function () {
// 获取选中的年份
var selectedYear = $(this).val();
// 发送 AJAX 请求获取该年份的所有月份数据
$.ajax({
url: 'getMonthData.php',
type: 'post',
data: { year: selectedYear },
dataType: 'json',
success: function (response) {
// 清空月份下拉菜单
$('#month-select').empty();
// 添加新的月份选项
for (var i = 0; i < response.length; i++) {
$('#month-select').append('<option value="' + response[i] + '">' + response[i] + '月</option>');
}
},
error: function () {
alert('获取月份数据失败!');
}
});
});
// 监听查询按钮的 click 事件
$('#search-btn').click(function () {
// 获取选中的年份和月份
var selectedYear = $('#year-select').val();
var selectedMonth = $('#month-select').val();
// 执行薪资查询操作
$.ajax({
url: 'searchSalary.php',
type: 'post',
data: { year: selectedYear, month: selectedMonth },
dataType: 'json',
success: function (response) {
// 处理查询结果
// ...
},
error: function () {
alert('查询薪资失败!');
}
});
});
```
PHP 代码:
getMonthData.php
```php
<?php
// 获取 POST 参数
$year = $_POST['year'];
// 模拟从数据库中获取该年份的所有月份数据
// 实际情况应该根据具体的数据库表结构和查询语句进行实现
$data = array('01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12');
// 返回 JSON 格式的数据
echo json_encode($data);
?>
```
searchSalary.php
```php
<?php
// 获取 POST 参数
$year = $_POST['year'];
$month = $_POST['month'];
// 模拟从数据库中查询薪资数据
// 实际情况应该根据具体的数据库表结构和查询语句进行实现
$data = array(
array('name' => '张三', 'salary' => 10000),
array('name' => '李四', 'salary' => 12000),
array('name' => '王五', 'salary' => 15000)
);
// 返回 JSON 格式的数据
echo json_encode($data);
?>
```
以上代码仅为示例,实际情况下需要根据具体的需求进行调整和完善。