用HTML在三个下拉菜单中实现年、月、日的联动效果
时间: 2023-12-26 21:22:38 浏览: 59
好的,下面是一个用 HTML 实现年、月、日的联动效果的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>年月日联动下拉菜单</title>
</head>
<body>
<label for="year">年:</label>
<select id="year" onchange="updateDays()">
<option value="">请选择</option>
<!-- 生成 1900 至当前年份的年份选项 -->
<?php
for ($i = 1900; $i <= date('Y'); $i++) {
echo "<option value=\"$i\">$i</option>";
}
?>
</select>
<label for="month">月:</label>
<select id="month" onchange="updateDays()">
<option value="">请选择</option>
<!-- 生成 1 至 12 的月份选项 -->
<?php
for ($i = 1; $i <= 12; $i++) {
echo "<option value=\"$i\">$i</option>";
}
?>
</select>
<label for="day">日:</label>
<select id="day">
<option value="">请选择</option>
</select>
<script type="text/javascript">
function updateDays() {
const year = document.getElementById('year').value;
const month = document.getElementById('month').value;
const daySelect = document.getElementById('day');
// 清空日的选项
daySelect.innerHTML = '<option value="">请选择</option>';
// 根据当前选择的年、月生成日的选项
if (year && month) {
const daysInMonth = new Date(year, month, 0).getDate();
for (let i = 1; i <= daysInMonth; i++) {
const option = document.createElement('option');
option.value = i;
option.text = i;
daySelect.add(option);
}
}
}
</script>
</body>
</html>
```
这段代码中,我们先使用 PHP 生成了年份和月份的选项。然后,我们在 HTML 中使用三个 select 元素表示年、月、日,并为年、月的 select 元素添加了 onchange 事件,当选择年或月时就会触发 updateDays 函数。在 updateDays 函数中,我们根据当前选择的年、月来动态生成日的选项,并更新日的 select 元素。最后,当页面加载完成时,我们也会触发一次 updateDays 函数来初始化日的选项。
阅读全文