如何在 html 的下拉列表中绑定过去 12 个月

How to bind the last 12 months in a dropdown list in html?

本文关键字:绑定 过去 个月 下拉列表 html      更新时间:2023-09-26

我的 Web 应用程序中有一个下拉列表,我需要能够在其中按适当的顺序绑定过去 12 个月。假设现在是2016年2月,因此下拉列表必须显示3月,然后是4月,5月,6月....截至一月。

<label>Select Month</label>
<select id = "drp1" onchange="mnth=this.value; drawChart1();">
    <option value="JAN">January</option>
    <option value="FEB">February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
</select>

我希望在页面加载时按正确的顺序排列值。我无法弄清楚哪个 Javascript 函数能够做到这一点,或者如何将值绑定到 JSON 并使用它来制作下拉列表中的选项。谁能帮帮我?

new Date()将返回当前日期对象。

DateObj.getMonth()将从 Date 对象(0-11)返回month

您可以动态创建选项,如下所示:

var date = new Date();
date.setMonth(date.getMonth() + 1);
var months = 12;
var monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
var select = document.getElementById('drp1');
var html = '';
for (var i = 0; i < months; i++) {
  var m = date.getMonth();
  html += '<option value="' + monthNames[m] + '">' + monthNames[m] + '</option>'
  date.setMonth(date.getMonth() + 1);
}
select.innerHTML = html;
<select id="drp1"></select>

在这里摆弄