html出生日期下拉菜单
时间: 2023-07-08 07:50:38 浏览: 153
可以使用HTML的<select>标签来创建出生日期的下拉菜单,以下是一个示例代码:
```html
<label for="birthday">出生日期:</label>
<select name="year" id="year">
<option value="">请选择年份</option>
<script>
var year = new Date().getFullYear();
for (var i = year; i >= 1900; i--) {
document.write('<option value="' + i + '">' + i + '</option>');
}
</script>
</select>
<select name="month" id="month">
<option value="">请选择月份</option>
<option value="01">1月</option>
<option value="02">2月</option>
<option value="03">3月</option>
<option value="04">4月</option>
<option value="05">5月</option>
<option value="06">6月</option>
<option value="07">7月</option>
<option value="08">8月</option>
<option value="09">9月</option>
<option value="10">10月</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>
<select name="day" id="day">
<option value="">请选择日期</option>
</select>
<script>
var yearSelect = document.getElementById("year");
var monthSelect = document.getElementById("month");
var daySelect = document.getElementById("day");
function daysInMonth(year, month) {
return new Date(year, month, 0).getDate();
}
function updateDays() {
var year = yearSelect.value;
var month = monthSelect.value;
var days = daysInMonth(year, month);
daySelect.innerHTML = '<option value="">请选择日期</option>';
for (var i = 1; i <= days; i++) {
var value = (i < 10 ? "0" : "") + i;
daySelect.innerHTML += '<option value="' + value + '">' + i + '</option>';
}
}
yearSelect.addEventListener("change", updateDays);
monthSelect.addEventListener("change", updateDays);
</script>
```
这段代码会生成三个下拉菜单,分别是年份、月份和日期,用户可以在这三个下拉菜单中选择自己的出生日期。其中,年份的下拉菜单中,会从当前年份向前生成到1900年的所有年份选项;日期的下拉菜单中,会根据用户选择的年份和月份动态生成对应的日期选项。
阅读全文