javascript - 在年份的下拉列表中获取当前年份

Question

这是我的 html 下拉列表

<select name="select" class="form-control" id="dropdownYear" style="width: 120px;" onchange="getProjectReportFunc()">
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017" selected="selected">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>

我已经硬编码了年份值，我想填充这个下拉列表 选择当前年份和之前和之后的 3 年。例如 当前年份=2017 我希望列表为 2013-2020 和 2017 自动选择。我如何在 js 中执行此操作？

Answer 1

为此，使用 Date是必需的，无论是直接还是与一些外部库。使用 native 方法 getFullYear:

Date.prototype.getFullYear()

Returns the year (4 digits for 4-digit years) of the specified date according to local time.

我们可以设置当前年份，然后循环遍历所需的值。您指定了 2013 - 2020，因此我们将使用当前年份减 4 到当前年份加 3。

for (var i = year - 4; i <= year + 3; i++)

在循环体中，创建Options并将它们添加到 Select .要显示这些值，需要设置 innerHTML，如果您想在 javascript 的其他地方使用该值，还需要设置 value:

option.value = option.innerHTML = i; 

如果索引等于当前年份，则设置selected 属性。

if (i === year) option.selected = true;

然后，您需要做的就是将每个 option 元素附加到 select 元素。创建 select 后，将其插入到您的 HTML 中(此处我附加到正文中)。

var select = document.createElement('select');
var date = new Date();
var year = date.getFullYear();
for (var i = year - 4; i <= year + 3; i++) {
  var option = document.createElement('option');
  option.value = option.innerHTML = i;
  if (i === year) option.selected = true;
  select.appendChild(option);
}
document.body.appendChild(select);