PHP页面有两个下拉菜单,监听第一个下拉菜单的 change 事件,当用户选择年份时,发送 AJAX 请求获取该年份的所有月份数据,并将获取到的月份作为第二个下拉菜单的子菜单项添加到其中。当用户选择再重新选择其它年份时,需要清空子菜单并重新获取新数据。当用户选择第二个下拉菜单的月份选项后,执行数据查询操作。生成完整代码
时间: 2023-12-30 07:04:58 浏览: 67
php实现查询功能(数据访问)
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);
}
?>
```
阅读全文