数据库中只有2022/09/01~2023/05/01的月度薪资发放记录。PHP页面有两个下拉菜单,分别是选择年份和月份。当页面加载完成时,发送 AJAX 请求获取可选年份,将年份添加到下拉菜单中,监听下拉菜单的 change 事件,获取所选年份,再发送 AJAX 请求获取可选月份,将月份添加到第二个下拉菜单的子菜单中,且子菜单默认值为‘select month’。监听月份下拉菜单的 change 事件,获取所选月份,并发送 AJAX 请求获取薪资记录,最后将该记录输出到PHP页面的表格中。注意,监听年份下拉菜单获取年份时,如果更改所选年份,则月份下拉菜单需要清空并重新获取月份。生成可以实现该功能的完整代码。
时间: 2023-12-21 22:06:14 浏览: 19
以下是可以实现该功能的完整代码:
```
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Salary Information</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Salary Information</h1>
<label for="year">Select Year:</label>
<select id="year">
<option value="">Select Year</option>
</select>
<label for="month">Select Month:</label>
<select id="month">
<option value="">Select Month</option>
</select>
<table id="salaryTable">
<thead>
<tr>
<th>Employee ID</th>
<th>Salary</th>
<th>Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
```
```
// script.js
$(document).ready(function() {
// Get available years
$.ajax({
url: "get_years.php",
success: function(result) {
$("#year").append(result);
}
});
// Year dropdown change event
$("#year").change(function() {
var year = $(this).val();
// Clear month dropdown and add default option
$("#month").empty();
$("#month").append("<option value=''>Select Month</option>");
if (year != "") {
// Get available months for selected year
$.ajax({
url: "get_months.php",
method: "POST",
data: {year: year},
success: function(result) {
$("#month").append(result);
}
});
}
});
// Month dropdown change event
$("#month").change(function() {
var year = $("#year").val();
var month = $(this).val();
if (year != "" && month != "") {
// Get salary information for selected year and month
$.ajax({
url: "get_salary.php",
method: "POST",
data: {year: year, month: month},
success: function(result) {
$("#salaryTable tbody").html(result);
}
});
}
});
});
```
```
// get_years.php
<?php
// Connect to database
$conn = new mysqli("localhost", "username", "password", "database_name");
// Query to get available years
$sql = "SELECT DISTINCT YEAR(date) AS year FROM salary ORDER BY year DESC";
// Execute query and get result
$result = $conn->query($sql);
// Add options to dropdown
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "<option value='" . $row["year"] . "'>" . $row["year"] . "</option>";
}
}
// Close database connection
$conn->close();
?>
```
```
// get_months.php
<?php
// Connect to database
$conn = new mysqli("localhost", "username", "password", "database_name");
// Get year from POST data
$year = $_POST["year"];
// Query to get available months for selected year
$sql = "SELECT DISTINCT MONTH(date) AS month FROM salary WHERE YEAR(date) = $year ORDER BY month";
// Execute query and get result
$result = $conn->query($sql);
// Add options to dropdown
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "<option value='" . $row["month"] . "'>" . date("F", mktime(0, 0, 0, $row["month"], 1)) . "</option>";
}
}
// Close database connection
$conn->close();
?>
```
```
// get_salary.php
<?php
// Connect to database
$conn = new mysqli("localhost", "username", "password", "database_name");
// Get year and month from POST data
$year = $_POST["year"];
$month = $_POST["month"];
// Query to get salary information for selected year and month
$sql = "SELECT * FROM salary WHERE YEAR(date) = $year AND MONTH(date) = $month";
// Execute query and create table rows
if ($result = $conn->query($sql)) {
while ($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>" . $row["employee_id"] . "</td>";
echo "<td>" . $row["salary"] . "</td>";
echo "<td>" . $row["date"] . "</td>";
echo "</tr>";
}
}
// Close database connection
$conn->close();
?>
```
注意,以上代码中的数据库连接信息需要根据实际情况进行修改。另外,为了安全起见,应该对传递的 POST 数据进行过滤和验证,防止 SQL 注入攻击。