时间戳

首页 > 解决方案 > 使用当前日期、月份和年份填充下拉列表

javascript - 使用当前日期、月份和年份填充下拉列表

问题描述

我可能会问你一个简单的问题，但我还是个新手，所以请有人帮助我。我有这个 html 和 jQuery 代码：

$(document).ready(function() {
    var d = new Date();
    var month = d.getMonth() + 1;
    var year = d.getFullYear();

    $("#month").val(month); 
    $("#year").val(year);    
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="month">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>
<select id="year">
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
</select>

所以问题是：如何根据它们是 30、31、28 还是闰年（Fevruary 为 29 天）再填充一个显示当前日期的下拉列表，同时显示该月的所有天数？任何帮助将不胜感激。PS这也可以更动态地完成吗？

标签： javascriptjqueryhtml

解决方案

好吧，与其写很多options标签，不如让一个loop为你做...请检查我下面的代码，我将在下面给出一个简短的解释。

（此代码使用 jQuery，但使用 vanilla JS 很容易实现）

$(document).ready(function() {
  const monthNames = ["January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
  ];
  let qntYears = 4;
  let selectYear = $("#year");
  let selectMonth = $("#month");
  let selectDay = $("#day");
  let currentYear = new Date().getFullYear();

  for (var y = 0; y < qntYears; y++) {
    let date = new Date(currentYear);
    let yearElem = document.createElement("option");
    yearElem.value = currentYear
    yearElem.textContent = currentYear;
    selectYear.append(yearElem);
    currentYear--;
  }

  for (var m = 0; m < 12; m++) {
    let month = monthNames[m];
    let monthElem = document.createElement("option");
    monthElem.value = m;
    monthElem.textContent = month;
    selectMonth.append(monthElem);
  }

  var d = new Date();
  var month = d.getMonth();
  var year = d.getFullYear();
  var day = d.getDate();

  selectYear.val(year);
  selectYear.on("change", AdjustDays);
  selectMonth.val(month);
  selectMonth.on("change", AdjustDays);

  AdjustDays();
  selectDay.val(day)

  function AdjustDays() {
    var year = selectYear.val();
    var month = parseInt(selectMonth.val()) + 1;
    selectDay.empty();

    //get the last day, so the number of days in that month
    var days = new Date(year, month, 0).getDate();

    //lets create the days of that month
    for (var d = 1; d <= days; d++) {
      var dayElem = document.createElement("option");
      dayElem.value = d;
      dayElem.textContent = d;
      selectDay.append(dayElem);
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="year"></select>
<select id="month"></select>
<select id="day"></select>

有一个名为 的变量qntYears，您可以在此处设置要在几年中显示的从当前年份回溯多select少年...

在那之后，有一个循环添加所有月份，这里没什么特别的。

最后一部分是重要的部分，我添加了一个change回调到selects年和月。当它们发生变化时，侦听器for loop会根据年份和当前月份重新创建（使用 a ）天数，这非常有用，因为每个月都有不同的天数（28、29、30、31）。执行此操作的
是.functionAdjustDays()

推荐阅读