使用纯 JavaScript 使用当前日期、月份和年份填充下拉列表答案

【问题标题】：Populate dropdown list with current day, month and year using pure javascript使用纯 JavaScript 使用当前日期、月份和年份填充下拉列表
【发布时间】：2021-12-21 12:37:50
【问题描述】：

我发现了一个我感兴趣的问题，并在此链接上找到了解决方案：https://stackoverflow.com/a/51660131/17222337，但它在 jQuery 中，但我对纯 javascript 解决方案感兴趣。我回顾了我能做什么，但在纯 JavaScript 中只发现了关于这个主题的非工作代码。我试图从 jQuery 翻译成 javascript，但我得到的代码是错误的并且不起作用。请告诉我，如何从给定的 jquery 代码制作 javascript 代码？

【问题讨论】：

你已经有了答案。阅读代码并理解它然后用js替换jquery元素（jquery很少）。如果您不理解此代码，您将无法理解此处其他人发布的代码。
jQuery 部分是最小的。
快速浏览了一下，唯一用到的jquery就是ready事件，可以改成window.addEventListener('load', () => { /**/ })

标签： javascript list dropdown

【解决方案1】：

我找到了解决办法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}
body{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
}
form span{
    display: block;
    margin: 20px 0;
}
/*make form styling consistent across browsers*/
button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
  }

    </style>
</head>
<body>
        <form>
        <span>
            <label for="day">Day:</label>
            <select name="day" id="day"></select>
        </span>
        <span>
            <label for="month">Month:</label>
            <select name="month" id="month"></select>
        </span>
        <span>
            <label for="year">Year:</label>
            <select name="year" id="year">Year:</select>
        </span>
    </form>
    <script>
        //Create references to the dropdown's
const yearSelect = document.getElementById("year");
const monthSelect = document.getElementById("month");
const daySelect = document.getElementById("day");

const months = ['January', 'February', 'March', 'April', 
'May', 'June', 'July', 'August', 'September', 'October',
'November', 'December'];

//Months are always the same
(function populateMonths(){
    for(let i = 0; i < months.length; i++){
        const option = document.createElement('option');
        option.textContent = months[i];
        monthSelect.appendChild(option);
    }
    monthSelect.value = "January";
})();

let previousDay;

function populateDays(month){
    //Delete all of the children of the day dropdown
    //if they do exist
    while(daySelect.firstChild){
        daySelect.removeChild(daySelect.firstChild);
    }
    //Holds the number of days in the month
    let dayNum;
    //Get the current year
    let year = yearSelect.value;

    if(month === 'January' || month === 'March' || 
    month === 'May' || month === 'July' || month === 'August' 
    || month === 'October' || month === 'December') {
        dayNum = 31;
    } else if(month === 'April' || month === 'June' 
    || month === 'September' || month === 'November') {
        dayNum = 30;
    }else{
        //Check for a leap year
        if(new Date(year, 1, 29).getMonth() === 1){
            dayNum = 29;
        }else{
            dayNum = 28;
        }
    }
    //Insert the correct days into the day <select>
    for(let i = 1; i <= dayNum; i++){
        const option = document.createElement("option");
        option.textContent = i;
        daySelect.appendChild(option);
    }
    if(previousDay){
        daySelect.value = previousDay;
        if(daySelect.value === ""){
            daySelect.value = previousDay - 1;
        }
        if(daySelect.value === ""){
            daySelect.value = previousDay - 2;
        }
        if(daySelect.value === ""){
            daySelect.value = previousDay - 3;
        }
    }
}

function populateYears(){
    //Get the current year as a number
    let year = new Date().getFullYear();
    //Make the previous 100 years be an option
    for(let i = 0; i < 101; i++){
        const option = document.createElement("option");
        option.textContent = year - i;
        yearSelect.appendChild(option);
    }
}

populateDays(monthSelect.value);
populateYears();

yearSelect.onchange = function() {
    populateDays(monthSelect.value);
}
monthSelect.onchange = function() {
    populateDays(monthSelect.value);
}
daySelect.onchange = function() {
    previousDay = daySelect.value;
}
    </script>
</body>
</html>

【讨论】：