【JS】今年から100年前までのselect optionタグを生成するサンプル

2022-02-24

JavaScript(jQuery)で最新年から過去100年のセレクトボックスを自動生成するサンプルプログラムをご紹介｡

初期値を設定しておくパターンもご紹介します｡

フォームの西暦の入力などにご活用ください｡

PHPバージョンはこちら｡

【PHP】最新年から過去100年のselect optionタグを自動生成するサンプル

過去100年

シンプルに､最新年から100年前までを生成しています｡

HTML

<select id="year"></select>

jQuery

$(function(){
	let dateY = new Date().getFullYear();
	let past = 100; //年前まで
	let html = '';
	for(let i = 0; i < past; i++){
		html += '<option value="'+ (dateY - i) +'">'+ (dateY - i) +'</option>'
	}
	$("#year").html(html);
});

JavaScript

let dateY = new Date().getFullYear();
let past = 100; //年前まで
let html = '';
for(let i = 0; i < past; i++){
	html += '<option value="'+ (dateY - i) +'">'+ (dateY - i) +'</option>'
}
document.getElementById("year").innerHTML = html;

過去100年だけど､初期値を22年前とかに

採用サイトなどでいかがでしょう？

若者がターゲットであろうサイトなら､こういう配慮をしましょう！

HTML

<select id="year"></select>

jQuery

$(function(){
	let dateY = new Date().getFullYear();
	let past = 100; //年前まで
	let select = 22; //年前を初期値に
	let html = '';
	for(let i = 0; i < past; i++){
		let prop='';
		if(i == select){
			prop = ' selected';
		}
		html += '<option value="'+ (dateY - i) +'"'+ prop +'>'+ (dateY - i) +'</option>'
	}
	$("#year").html(html);
});

JavaScript

let dateY = new Date().getFullYear();
let past = 100; //年前まで
let select = 22; //年前を初期値に
let html = '';
for(let i = 0; i < past; i++){
	let prop='';
	if(i == select){
		prop = ' selected';
	}
	html += '<option value="'+ (dateY - i) +'"'+ prop +'>'+ (dateY - i) +'</option>'
}
document.getElementById("year").innerHTML = html;

2年後から過去100年

こちらも採用サイトなどの大学卒業(予定)年などでいかがでしょう？

HTML

<select id="year"></select>

jQuery

$(function(){
	let dateY = new Date().getFullYear();
	let start = 2; //年後から
	let past = 100; //年前まで
	dateY += start;
	let html = '';
	for(let i = 0; i < past; i++){
		html += '<option value="'+ (dateY - i) +'">'+ (dateY - i) +'</option>'
	}
	$("#year").html(html);
});

JavaScript

let dateY = new Date().getFullYear();
	let start = 2; //年後から
	let past = 100; //年前まで
	dateY += start;
	let html = '';
	for(let i = 0; i < past; i++){
		html += '<option value="'+ (dateY - i) +'">'+ (dateY - i) +'</option>'
	}
	document.getElementById("year").innerHTML = html;