js出生日期年月日级联菜单示例代码

当然，以下是一个简单的JavaScript示例，展示了如何使用HTML和JavaScript来创建一个年月日级联菜单（即，选择年份后，月份和日份的选项会根据年份自动更新）。这个示例简化了日期的生成逻辑，仅作为演示。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>年月日级联菜单示例</title>
<script>
function populateMonths(year) {
    let months = document.getElementById('month');
    months.innerHTML = ''; // 清空月份选项
    for (let i = 1; i <= 12; i++) {
        let option = document.createElement('option');
        option.value = i;
        option.textContent = i.toString().padStart(2, '0'); // 保证月份为两位数
        months.appendChild(option);
    }

    // 这里可以根据需要添加月份天数的逻辑，但为简化示例，暂时不展开
}

function populateDays(year, month) {
    let days = document.getElementById('day');
    days.innerHTML = ''; // 清空日期选项
    let daysInMonth = 31; // 默认31天，根据月份调整
    if (month === 2) { // 2月
        if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
            daysInMonth = 29; // 闰年
        } else {
            daysInMonth = 28; // 平年
        }
    } else if ([4, 6, 9, 11].includes(month)) {
        daysInMonth = 30; // 4,6,9,11月有30天
    }

    for (let i = 1; i <= daysInMonth; i++) {
        let option = document.createElement('option');
        option.value = i;
        option.textContent = i.toString().padStart(2, '0'); // 保证日期为两位数
        days.appendChild(option);
    }
}

window.onload = function() {
    let yearSelect = document.getElementById('year');
    for (let year = 1900; year <= 2100; year++) { // 示例年份范围
        let option = document.createElement('option');
        option.value = year;
        option.textContent = year.toString();
        yearSelect.appendChild(option);
    }

    yearSelect.addEventListener('change', function() {
        populateMonths(this.value);
        let monthSelect = document.getElementById('month');
        monthSelect.value = 1; // 默认选择第一个月
        populateDays(this.value, monthSelect.value);
    });

    let monthSelect = document.getElementById('month');
    monthSelect.addEventListener('change', function() {
        populateDays(yearSelect.value, this.value);
    });

    // 初始化第一个年份的月份和日期
    if (yearSelect.value) {
        populateMonths(yearSelect.value);
        populateDays(yearSelect.value, monthSelect.value);
    }
};
</script>
</head>
<body>
<select id="year"></select>
<select id="month"></select>
<select id="day"></select>
</body>
</html>

这个示例创建了一个包含年、月、日三个下拉选择框的HTML页面。用户选择年份后，月份和日期的选项会自动更新。注意，这个示例简化了日期生成逻辑，特别是月份天数的计算，对于2月以外的月份，直接默认了31天或30天，然后根据月份和年份调整2月的天数。你可以根据实际需求进一步扩展和优化这个示例。

js出生日期 年月日级联菜单示例代码

js出生日期年月日级联菜单示例代码