I have try list down past 20 years in dropdown list. But not able to display it as range where Year to Year form

223
November 21, 2016, at 8:45 PM

I got past 20 years from current year. but currently i want it to show as year to year . For example: 1992 - 1999 1999 - 2002 2003 - 2015

Here is my code.

function populatedropdown(yearfield) { 
  var today = new Date(), 
      yearfield = document.getElementById(yearfield), 
      beforeYears = 20 
      thisyear = today.getFullYear(); 
   
  for (var year = thisyear-beforeYears, index = 0;  
           index <= beforeYears;  
           index++, year++) { 
    yearfield.options[index] = new Option(year, year); 
  } 
  yearfield.value = thisyear; 
    //select today's year 
} 
 
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select) 
window.onload = function() { 
  populatedropdown("yeardropdown") 
}
<td><select id="yeardropdown"/></td>

This is the ideal output that i wish to have it

Answer 1

I'm not sure if I understood your question correctly, but if I did, it's easier than what you already have:

function populatedropdown(yearfield) { 
  var today = new Date(), 
      yearfield = document.getElementById(yearfield), 
      beforeYears = 20, 
      thisYear = today.getFullYear(), 
      firstYear = thisYear - beforeYears, 
      yearRange = firstYear + ' - ' + thisYear; 
   
  yearfield.options[0] = new Option(yearRange, yearRange); 
  yearfield.value = yearRange; 
} 
 
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select) 
window.onload = function() { 
  populatedropdown("yeardropdown") 
}
<select id="yeardropdown"/>

Update

Since you've updated your question, here is the proposed solution I have:

(function(d) { 
  d.addEventListener('DOMContentLoaded', function() { 
    var currentYear = new Date().getFullYear(), 
        totalYears = 20, 
        firstYear = currentYear - totalYears;     
     
    var fromYear = d.getElementById('fromYear'), 
        toYear = d.getElementById('toYear'); 
     
    for (var i = firstYear; i <= currentYear; i++) { 
      var opt = d.createElement('option'); 
      opt.value = i; 
      opt.textContent = i; 
       
      fromYear.appendChild(opt); 
      toYear.appendChild(opt.cloneNode(true)); 
    } 
     
    toYear.value = currentYear; 
     
    /* if you don't want to disable the impossible selections, remove the code below */ 
    disableYears(); 
     
    fromYear.addEventListener('change', disableYears); 
    toYear.addEventListener('change', disableYears); 
     
    function disableYears(e) { 
      [].forEach.call(fromYear.querySelectorAll('option'), function(opt, i) { 
        opt.disabled = opt.value > toYear.value; 
      }); 
       
      [].forEach.call(toYear.querySelectorAll('option'), function(opt, i) { 
        opt.disabled = opt.value < fromYear.value; 
      }); 
    } 
    /* if you don't want to disable the impossible selections, remove the code above */ 
  }); 
})(document);
<select id='fromYear'></select> 
<select id='toYear'></select>

READ ALSO
Bootstrap 3.3.5 dropdown-menu&#39;s showing dark

Bootstrap 3.3.5 dropdown-menu's showing dark

Working example at: www. collecthw.

355
jQuery demo code throwing error

jQuery demo code throwing error

I'm trying to add a dialog to my code. I was using the code referenced at https://jqueryui.

354
counterup the numbers with setInterval (jQuery)

counterup the numbers with setInterval (jQuery)

I'm trying to counter up the numbers defined in data attribute with set interval. [nnn]My code is here.

455