Блог

Главная - Вопросы по программированию - Автоматическое добавление лет в HTML select с помощью Javascript

Автоматическое добавление лет в HTML select с помощью Javascript

#javascript #html

#javascript #HTML

Вопрос:

У меня есть ввод select, который будет отображать годы с этого года до 1920 года.

Однако мой код javascript, похоже, отображает его только в порядке возрастания.

   var max = new Date().getFullYear(),
    min = max - 99,
    select = document.getElementById('year');

for (var i = min; i <= max; i  ) {
  var opt = document.createElement('option');
  opt.value = i;
  opt.innerHTML = i;
  select.appendChild(opt);
}  
 <select name="year" id="year"></select>

Поэтому он должен показывать:
2019
2018
2017…

Нет: 1920 1921 1922

Ответ №1:

Есть несколько способов, используйте добавление или просто обратный отсчет вместо увеличения. Этот метод ведет обратный отсчет. В отличие от prepend, самый высокий автоматически выбирается с обратным отсчетом.

 var max = new Date().getFullYear(),
    min = max - 99,
    select = document.getElementById('year');

for (var i = max; i >= min; i--) {
  var opt = document.createElement('option');
  opt.value = i;
  opt.innerHTML = i;
  select.appendChild(opt);
}  
 <select name="year" id="year"></select>

Ответ №2:

Используйте ParentNode#prepend метод для добавления в начале, и это сделает порядок по убыванию.

 var max = new Date().getFullYear(),
    min = max - 99,
    select = document.getElementById('year');

for (var i = min; i <= max; i  ) {
  var opt = document.createElement('option');
  opt.value = i;
  opt.innerHTML = i;
  select.prepend(opt);
}  
 <select name="year" id="year"></select>