In this article I will explain with an example, how to dynamically populate Year in DropDownList i.e. HTML SELECT element using JavaScript.
Inside the window.onload event handler, the DropDownList i.e. HTML SELECT element will be referenced and using a For Loop, one by one Year values will be appended to the DropDownList using JavaScript.
HTML Markup
The following HTML Markup consists of a DropDownList i.e. HTML SELECT element.
<select id="ddlYears"></select>
Dynamically populating Year in DropDownList (SELECT) using JavaScript
Inside the window.onload event handler, first the DropDownList i.e. HTML SELECT element is referenced and then the Current Year is determined using JavaScript Date object.
Then using a For Loop, one by one Year values will be appended to the DropDownList by creating a dynamic OPTION element using JavaScript.
<script type="text/javascript">
window.onload = function () {
//Reference the DropDownList.
var ddlYears = document.getElementById("ddlYears");
//Determine the Current Year.
var currentYear = (new Date()).getFullYear();
//Loop and add the Year values to DropDownList.
for (var i = 1950; i <= currentYear; i++) {
var option = document.createElement("OPTION");
option.innerHTML = i;
option.value = i;
ddlYears.appendChild(option);
}
};
</script>
Screenshot
![Dynamically populate Year in DropDownList (SELECT) using JavaScript]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
