数据库中只有2022/09/01~2023/05/01的月度薪资发放记录。PHP页面有两个下拉菜单,分别是选择年份和月份。用户点击年份选择下拉菜单框,则子菜单显示数据库薪资发放记录中出现的年份数据。监听第一个下拉菜单的 change 事件,当用户选择年份时,发送 AJAX 请求获取该年份的所有月份数据,并将获取到的月份作为第二个下拉菜单的子菜单项添加到其中。当用户选择再重新选择其它年份时,需要清空子菜单并重新获取新数据。当用户选择第二个下拉菜单的月份选项后,执行该年该月的薪资查询操作。生成完整代码
时间: 2024-02-03 16:12:32 浏览: 66
以下是一个简单的示例代码,包含前端 HTML 和 JavaScript 以及后端 PHP。
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>月度薪资查询</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>月度薪资查询</h1>
<label for="year">选择年份:</label>
<select id="year">
<option value="">请选择</option>
</select>
<label for="month">选择月份:</label>
<select id="month">
<option value="">请选择</option>
</select>
<button id="search">查询</button>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
```
JavaScript 代码(`script.js`):
```javascript
// 获取年份列表
function getYearList() {
$.ajax({
url: 'getYearList.php',
success: function(data) {
$('#year').html(data);
}
});
}
// 获取月份列表
function getMonthList(year) {
$.ajax({
url: 'getMonthList.php',
method: 'POST',
data: {year: year},
success: function(data) {
$('#month').html(data);
}
});
}
// 监听年份选择框的 change 事件
$('#year').change(function() {
var year = $(this).val();
if (year) {
getMonthList(year);
} else {
$('#month').html('<option value="">请选择</option>');
}
});
// 监听查询按钮的 click 事件
$('#search').click(function() {
var year = $('#year').val();
var month = $('#month').val();
if (year && month) {
$.ajax({
url: 'searchSalary.php',
method: 'POST',
data: {year: year, month: month},
success: function(data) {
$('#result').html(data);
}
});
} else {
alert('请选择年份和月份');
}
});
// 初始化年份列表
getYearList();
```
PHP 代码(`getYearList.php`):
```php
<?php
// 数据库连接信息
$host = 'localhost';
$user = 'root';
$password = '123456';
$dbname = 'test';
// 连接数据库
$conn = mysqli_connect($host, $user, $password, $dbname);
if (!$conn) {
die('数据库连接失败:' . mysqli_connect_error());
}
// 查询年份列表
$sql = "SELECT DISTINCT YEAR(salary_date) AS year FROM salary ORDER BY year DESC";
$result = mysqli_query($conn, $sql);
if (!$result) {
die('查询失败:' . mysqli_error($conn));
}
// 构造下拉菜单选项
$options = '<option value="">请选择</option>';
while ($row = mysqli_fetch_assoc($result)) {
$options .= '<option value="' . $row['year'] . '">' . $row['year'] . '</option>';
}
// 输出下拉菜单选项
echo $options;
// 关闭数据库连接
mysqli_close($conn);
?>
```
PHP 代码(`getMonthList.php`):
```php
<?php
// 数据库连接信息
$host = 'localhost';
$user = 'root';
$password = '123456';
$dbname = 'test';
// 连接数据库
$conn = mysqli_connect($host, $user, $password, $dbname);
if (!$conn) {
die('数据库连接失败:' . mysqli_connect_error());
}
// 获取 POST 数据
$year = $_POST['year'];
// 查询月份列表
$sql = "SELECT DISTINCT MONTH(salary_date) AS month FROM salary WHERE YEAR(salary_date) = $year ORDER BY month ASC";
$result = mysqli_query($conn, $sql);
if (!$result) {
die('查询失败:' . mysqli_error($conn));
}
// 构造下拉菜单选项
$options = '<option value="">请选择</option>';
while ($row = mysqli_fetch_assoc($result)) {
$options .= '<option value="' . $row['month'] . '">' . $row['month'] . '月</option>';
}
// 输出下拉菜单选项
echo $options;
// 关闭数据库连接
mysqli_close($conn);
?>
```
PHP 代码(`searchSalary.php`):
```php
<?php
// 数据库连接信息
$host = 'localhost';
$user = 'root';
$password = '123456';
$dbname = 'test';
// 连接数据库
$conn = mysqli_connect($host, $user, $password, $dbname);
if (!$conn) {
die('数据库连接失败:' . mysqli_connect_error());
}
// 获取 POST 数据
$year = $_POST['year'];
$month = $_POST['month'];
// 查询薪资记录
$sql = "SELECT * FROM salary WHERE YEAR(salary_date) = $year AND MONTH(salary_date) = $month";
$result = mysqli_query($conn, $sql);
if (!$result) {
die('查询失败:' . mysqli_error($conn));
}
// 构造查询结果表格
$table = '<table border="1"><tr><th>姓名</th><th>工资</th></tr>';
while ($row = mysqli_fetch_assoc($result)) {
$table .= '<tr><td>' . $row['name'] . '</td><td>' . $row['salary'] . '</td></tr>';
}
$table .= '</table>';
// 输出查询结果表格
echo $table;
// 关闭数据库连接
mysqli_close($conn);
?>
```
这个示例代码仅供参考,实际应用中需要根据具体需求进行修改和完善。
阅读全文