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年.Eg for 当前年份= 2017年我希望2017年的清单为2013-2020 自动选择。我如何在js中做到这一点？

Answer 1

要实现这一点，需要使用Date，无论是直接使用还是使用某些外部库。使用本机方法getFullYear：

Date.prototype.getFullYear()

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

我们可以设置当前年份，然后循环显示所需的值。您指定了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);

Answer 2

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 3

您可以尝试这样的事情：

<tr *ngFor="let innerItem of project.project_services">
    <td *ngFor="let categoryItem of innerItem.categories">{{categoryItem.name}</td>
    <td>{{innerItem.service.sku}}</td>
    <td>{{innerItem.service.name}}</td>
</tr>

$('#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>');
  }

})

Answer 4

这是非常简单的逻辑，

首先获得当年，
然后运行从currentyear -2开始的循环到当前年份+ 3
制作当前年份selected

见下面的代码：

＆＃13;

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>');
}

＆＃13;

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>

Answer 6

一个简单的例子，不使用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()" />

Answer 7

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);
}

获得当年的下降年份

7 个答案: