【js】jQuery or jsで生年月日入力formを自動生成するサンプルコード

汎用性の高そうなコードなので、残しておきます。

完成品

【JavaScript】生年月日入力formを自動生成

See the Pen 【JavaScript】生年月日入力formを自動生成 by nkmrkisk (@rekid) on CodePen.

【jQuery】生年月日入力formを自動生成

See the Pen 【jQuery】生年月日入力formを自動生成 by nkmrkisk (@rekid) on CodePen.

記述したコード

<select id="year"><option value="0">----</option></select>年
<select id="month"><option value="0">--</option></select>月
<select id="day"><option value="0">--</option></select>日​

jQueryの場合

var time = new Date();
var year = time.getFullYear();
for (var i = year; i >= 1900; i--) {
    $('#year').append('<option value="' + i + '">' + i + '</option>');
}
for (var i = 1; i <= 12; i++) {
    $('#month').append('<option value="' + i + '">' + i + '</option>');
}
for (var i = 1; i <= 31; i++) {
    $('#day').append('<option value="' + i + '">' + i + '</option>');
}

JavaScriptの場合

var time = new Date();
var year = time.getFullYear();
for (var i = year; i >= 1900; i--) {
  createOptionElements(i,'year');
}
for (var i = 1; i <= 12; i++) {
  createOptionElements(i,'month');
}
for (var i = 1; i <= 31; i++) {
  createOptionElements(i,'day');
}

function createOptionElements(num,parentId){
    var doc = document.createElement('option');
    doc.value = doc.innerHTML = num;
    document.getElementById(parentId).appendChild(doc);
}