I'm creating a dropdownlist of year. How can I automatically populate the dropdownlist?
For example, I will be adding a dropdown value 1980, can I use jQuery to populate it to the current year, so I will not need to type all the year?
I'm creating a dropdownlist of year. How can I automatically populate the dropdownlist?
For example, I will be adding a dropdown value 1980, can I use jQuery to populate it to the current year, so I will not need to type all the year?
Share Improve this question edited Apr 19, 2016 at 7:28 Ajit Medhekar 1,0781 gold badge11 silver badges47 bronze badges asked Apr 19, 2016 at 7:03 Chong We TanChong We Tan 2431 gold badge5 silver badges15 bronze badges 1- Please when asking questions try always to show some code, your best try, so people can give you more guidance, not only answer with snippets. – Roko C. Buljan Commented Apr 19, 2016 at 7:12
6 Answers
Reset to default 5You can use a for loop between 1980 and the current year, which you can retrieve through the getFullYear() property of a Date object. Try this:
var html = '';
for (var i = 1980; i <= new Date().getFullYear(); i++) {
html += '<option value="' + i + '">' + i + '</option>';
}
$('#mySelect').html(html);
Working example
If you'd prefer to start with the current year and work down, you can use a negative iteration, like this:
for (var i = new Date().getFullYear(); i >= 1980; i--) {
html += '<option value="' + i + '">' + i + '</option>';
}
It's simple using a for loop and adding to string like:
var nowY = new Date().getFullYear(),
options = "";
for(var Y=nowY; Y>=1980; Y--) {
options += "<option>"+ Y +"</option>";
}
$("#years").append( options );<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="years"></select>https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear
http://api.jquery./append/
You can use a for loop (http://www.w3schools./js/js_loop_for.asp)
function fillDates(startDate){
yr = new Date().getFullYear();
options = "";
for(var i=startDate, i<=yr, i++){
options += ("<option value = "+i+">"+i+"</option");
}
$("select").append(options);
}
fillDates(1908);
chong there are lots of answers, i am little bit let to update my answer to jsFiddle.
fiddle : https://jsfiddle/eua98tqa/8/
HTML:
<html>
<head>
</head>
<body>
<select>
</select>
</body>
</html>
jQuery:
var fromYear = 1980;
var currentYear = new Date().getFullYear();
for (var i = fromYear; i <= currentYear; i++) {
$("select").append('<option value="' + i + '">' + i + '</option>');
}
I have more than one year dorpdowns, for which I wanted to pute year list from one specific year till current year. Commenting my final solution, may be somebody can find this useful:
function populateYearList(minYear, currentYear, selectElement){
var max = currentYear, min = minYear;
for (var i = min; i<=max; i++) {
var opt = document.createElement('option');
opt.value = i;
opt.innerHTML = i;
selectElement.append(opt);
}
//selecting current year by default and adding "selected" attribute to it
$(selectElement).val(max)
.find("option[value=" + max +"]")
.attr("selected","selected");
}
calling on page load
var selectElement = $('.select-class');
populateYearList('2015', currentYear, selectElement);
please refer code below
<input type="text" id="inputyear">
<select id="selectyear">
</select>
<input type="button" value="Generate" onclick="FillYears()">
<script type="text/javascript">
function FillYears(){
for(var i=parseInt($("#inputyear").val());i<=(new Date().getFullYear());i++)
{
$("#selectyear").append($("<option>"+i+"</option>"));
}
}
</script>