CODEWITHSUNDEEP
javascriptjquery
Chong We Tan
Chong We Tan

Reputation: 243

Populate the dropdownlist from a specfic year to current 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?

Upvotes: 2

Views: 6470

Answers (6)

K Shaikh
K Shaikh

Reputation: 401

I have more than one year dorpdowns, for which I wanted to compute 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);

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206048

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="years"></select>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear
http://api.jquery.com/append/

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337560

You 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>';
}

Upvotes: 5

Bharat
Bharat

Reputation: 6095

chong there are lots of answers, i am little bit let to update my answer to jsFiddle.

fiddle : https://jsfiddle.net/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>');
}

Upvotes: 0

Velimir Tchatchevsky
Velimir Tchatchevsky

Reputation: 2815

You can use a for loop (http://www.w3schools.com/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);

Upvotes: 2

Dhaval Pankhaniya
Dhaval Pankhaniya

Reputation: 1996

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>

Upvotes: -1

Related Questions