In this article I will explain with an example, how to dynamically populate Year in DropDownList i.e. HTML SELECT element using jQuery.
Inside the jQuery document ready 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 jQuery.
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 jQuery
Inside the jQuery document ready 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 jQuery.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
//Reference the DropDownList.
var ddlYears = $("#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 = $("<option />");
option.html(i);
option.val(i);
ddlYears.append(option);
}
});
</script>
Screenshot
![Dynamically populate Year in DropDownList (SELECT) using jQuery]()
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
