在年份下拉菜单中获取当前年份

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>

我已经硬编码了年份值，我想要填充这个下拉列表，并选择当前年份和之前三年和之后三年的年份。例如，对于当前年份为2017，我希望列表为2013-2020，自动选择2017。我该如何在js中实现这一点？

- Abhilasha

---

你尝试了什么？你可能需要使用Date.prototype.getFullYear()，并结合 Date.now()。 - Kevin Kloet

如何创建一个最小化、完整化和可验证的示例 - Ole Haugset

你可以在W3School网站上搜索：https://www.w3schools.com/js/js_dates.asp - Saber Motamedi

@Abhilasha，我的解决方案怎么样？ - Mihai Alexandru-Ionut

Answer 1

为了实现这个目标，需要使用日期，无论是直接使用还是通过某些外部库。使用本地方法getFullYear：

Date.prototype.getFullYear()

根据本地时间返回指定日期的年份（4位数字表示4位年份）。

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

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

在循环体中，创建选项并将它们添加到选择框中。为了显示这些值，需要设置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);

- Namaskar

---

好的，干净利落。这应该是被接受的答案。 - Dan-Levi Tømta

@Dan-LeviTømta，或者使用ES6的东西来获得更简洁的解决方案，就像我的答案一样 :) - Mihai Alexandru-Ionut

@Alexandru-IonutMihai 是的，它的代码行数更少，看起来也很简洁，但我认为对于刚开始学习 JavaScript 的人来说，避免混淆是一个更好的主意。 - Namaskar

@SvenWritesCode，是的，没错。无论如何+1 :) - Mihai Alexandru-Ionut

Answer 2

var i, currentYear, startYear, endYear, newOption, dropdownYear;
dropdownYear = document.getElementById("dropdownYear");
currentYear = (new Date()).getFullYear();
startYear = currentYear - 4;
endYear = currentYear + 3;

for (i=startYear;i<=endYear;i++) {
  newOption = document.createElement("option");
  newOption.value = i;
  newOption.label = i;
 if (i == currentYear) {
  newOption.selected = true;
 }
  dropdownYear.appendChild(newOption);
}

<select name="select" class="form-control" id="dropdownYear"
 style="width: 120px;" onchange="getProjectReportFunc()">
</select>

- Guillaume Georges

Answer 3

您可以尝试以下方法：

您可以尝试类似以下的操作：

$('#dropdownYear').each(function() {

  var year = (new Date()).getFullYear();
  var current = year;
  year -= 3;
  for (var i = 0; i < 6; i++) {
    if ((year+i) == current)
      $(this).append('<option selected value="' + (year + i) + '">' + (year + i) + '</option>');
    else
      $(this).append('<option value="' + (year + i) + '">' + (year + i) + '</option>');
  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select" class="form-control" id="dropdownYear" style="width: 120px;" onchange="getProjectReportFunc()">
</select>

- Temani Afif

Answer 4

这是非常简单的逻辑，

• 首先获取当前年份，
• 然后从当前年份减2开始循环到当前年份加3，
• 将当前年份设为selected。

请参见下面的代码：

console.clear();
var curYear = new Date().getFullYear();

for(i = curYear-2 ; i <= curYear+3 ; i++) {
  var selected = (curYear === i) ? 'selected="selected"': '';
  console.log('<option '+selected+' value="'+i+'">'+i+'</option>');
}

- shyammakwana.me

Answer 5

你可以使用ES6的数组功能。

let currentYear=new Date().getFullYear();
let array=Array.from(Array(7), (_, i) => currentYear-3+i);
array.forEach(function(item){
   let option=$('<option></option>').html(item).attr('selected', item == currentYear);
   $('select').append(option);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select" class="form-control" id="dropdownYear">

</select>

- Mihai Alexandru-Ionut

Answer 6

虽然我很欣赏这些答案，但我觉得可以使用现代工具.map和Array构造函数来完成这些操作，因此我创建了以下代码：

const CreateYearDropdown = () => {
  const nYearsPrior = 20;
  const nYearsPost = 20;
  const yearRange = Array(nYearsPrior+nYearsPost).fill(0);
  const currentYear = new Date().getFullYear();
  const years = yearRange.map(
    (item, index) => (item[index] = currentYear - nYearsPrior + index)
  );

  return (
    <select defaultValue={currentYear}>
      {years.map((year, index) => (
        <option key={index} value={year}>
          {String(year)}
        </option>
      ))}
    </select>
  )
}
 

如果没有上述的解释和分解，可以这样写：

const CreateYearDropdown = () => {
  const currentYear = new Date().getFullYear();
  const yearRange = Array(40).fill(0);
  const years = yearRange.map(
    (item, index) => (item[index] = currentYear - 20 + index)
  );

  return (
    <select defaultValue={currentYear}>
      {years.map((year, index) => (
        <option key={index} value={year}>
          {year}
        </option>
      ))}
    </select>
  );
};

或者您可以在一个方向上运行它（之前或之后）：

const CreateYearDropdown = () => {
  const currentYear = new Date().getFullYear();
  const yearRange = Array(20).fill(0);
  const years = yearRange.map(
    (item, index) => (item[index] = currentYear /* - or + */ + index)
  );

  return (
    <select defaultValue={currentYear}>
      {years.map((year, index) => (
        <option key={index} value={year}>
          {year}
        </option>
      ))}
    </select>
  );
};

- dan.riley

Answer 7

一个不使用JQuery的简单示例 -

var currentYear = new Date().getFullYear();
var yearSelect = document.getElementById('dropdownYear');
for(var i = -2; i < 3; i++) {
    var isSelected = currentYear === currentYear - i
    yearSelect.options[yearSelect.options.length] = new Option(currentYear - i, currentYear - i, isSelected, isSelected);
}

以及HTML代码：

<select name="select" class="form-control" id="dropdownYear" style="width: 120px;" onchange="getProjectReportFunc()" />

- CD-jS

Answer 8

HTML：

<select 
         name="select"
         class="form-control"
         id="dropdownYear"
         style="width: 120px;"
         onchange="getProjectReportFunc()">
</select>

Javascript：

let select = document.getElementById('dropdownYear');
let currYear = new Date().getFullYear();
let futureYear = currYear+3;
let pastYear = currYear-3;
for(let year = pastYear; year <= futureYear; year++){
  let option = document.createElement('option');
  option.setAttribute('value', year);
  if(year === currYear){
    option.setAttribute('selected', true);
  }
  option.innerHTML = year;
  select.appendChild(option);
}

- Adrian Frunza