Creating A Dynamic Credit Card Dropdown with JavaScript

Question

I am trying to create a dynamic dropdown that will take the current year and iterate another 15 years to it so I don't have to continue to update the credit card year dropdown field. I have successfully built the for loop but cannot seem to figure out how to put this inside a select tag.

Any help would be great!

Here is the for loop that iterates the date. Here is my CodePen

var date = new Date().getFullYear();
var length = date + 16;

for(var i = date; i < length; i++){
  document.write("<br/>" + i + "<br/>");
}

Answer 1

Well, definitely you want to end up with something similar to the following, right?

<select>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <!-- ... -->
    <option value="2027">2027</option>
</select>

So you should be creating <option> elements in your loop, and throwing them into a <select> element. Something a little like this:

var year = new Date().getFullYear(),
    $select = $('select').empty()  // be sure to select the proper, ahem, select
    ;

for(var i = 0; i < 15; i++) {
    $('<option>')          // creates an <option> element
        .val(year + i)     // sets its value
        .text(year + i)    // sets the text inside
        .appendTo($select) // puts it into your <select>
    ;
}

Several points for optimization in my script (favor adding all elements in one go instead of one by one; consider creating a template and just cloning, instead of making jQuery parse your HTML string; etc), but I'll leave that up to you.

Answer 2

var date = new Date().getFullYear();
var length = date + 16;

var select = $("#select");
select.empty();
for(var i = date; i < length; i++){
  select.append($('<option></option>').val(i).html(i));
}

Answer 3

without using jquery it looks like this

 var options = "";
 for(var i = date; i < length; i++){
     options += "<option value='"+ i +"'>" + i + "<option/>";
 }
 document.getElementById('select').innerHTML = options;

Answer 4

Using just plain JavaScript:

var date = new Date().getFullYear(),
    sel = document.getElementById('select'),
    prop = 'textContent' in document.createElement() ? 'textContent' : 'innerText',
    opt;

for (var i = 0, len = 16; i < len; i++) {
    opt = document.createElement('option');
    opt.value = date + i;
    opt[prop] = date + i;
    sel.appendChild(opt);
}

JS Fiddle demo .

Answer 5

here you have and I would also recommend you to use a javascript framework, JQuery for instance.

var date = new Date().getFullYear();

var length = date + 16;

document.getElementById('select').innerHTML = '';

for(var i = date; i < length; i++){

  document.getElementById('select').innerHTML += '<option value="'+i+'">'+i+'</option>';

}

Answer 6

As Richard Neil Ilagan said, you should be creating <option> elements and appending them to your <select> element. Here's a solution without jQuery

var select = document.getElementById("select");
var startYear = new Date().getFullYear();
var option, currentYear;

for(var i = 0; i <= 15; i++) {
  currentYear = startYear + i;

  option = document.createElement("option");
  option.setAttribute("value", currentYear);
  option.appendChild(document.createTextNode(currentYear));

  select.appendChild(option);
}