[자바스크립트] selectbox(셀렉트박스) 년도, 월 만들기 (년도 역순)

Date 객체를 통해서 selectbox에 연도와 월을 2가지 형태로 표시하였습니다.
첫 번째 selectbox는 2022년부터 2027년까지 표시하였고, 월의 길이를 체크해 1자리 이면 앞에 0을 붙였습니다.
두 번째 selectbox는 2022년부터 시작하여 거꾸로 2017년까지 나타 냈으며, 현재 년도와 월에 selected 옵션을
추가하였습니다. 간단한 스크립트 소스이니 응용해서 사용하시면 됩니다.

 

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
	setDateBox();
	setDateBox1();
});
function setDateBox(){
	var dt = new Date();
	var year = dt.getFullYear();

	$("#year").append("<option value=''>년도</option>");
	for(var y = (year); y <= (year+5); y++){
		$("#year").append("<option value='"+ y +"'>"+ y + " 년" +"</option>");
	}
	
	$("#month").append("<option value=''>월</option>");
	for(var i = 1; i <= 12; i++){
		if(String(i).length == '1'){
			$("#month").append("<option value='"+"0" + i +"'>"+"0" + i + "월" +"</option>");
		}else{
			$("#month").append("<option value='"+ i +"'>"+ i + "월" +"</option>");
		}
	}
}
function setDateBox1(){
	var dt = new Date();
	var year = dt.getFullYear();
	var month = dt.getMonth()+1;

	for(var y = (year); y >=(year-5); y--){
		if(year == y) {
			$("#year1").append("<option selected value='"+ y +"'>"+ y + "년" +"</option>");
		}else{
			$("#year1").append("<option value='"+ y +"'>"+ y + "년" +"</option>");
		}
	}
	for(var i = 1; i <= 12; i++){
		if(month == i) {
			$("#month1").append("<option selected value='"+ i +"'>"+ i + "월" +"</option>");
		}else{
			$("#month1").append("<option value='"+ i +"'>"+ i + "월" +"</option>");
		}
	}
}
</script>
<div> 첫번째 selectbox
	<select class="form-control input-sm" id="year" name="year">
	</select>
	<select class="form-control input-sm" id="month" name="month">
	</select>
</div>
<div> 두번째 selectbox
	<select class="form-control input-sm" id="year1" name="year1">
	</select>
	<select class="form-control input-sm" id="month1" name="month1">
	</select>
</div>

 

소스화면

 

소스화면

 

 

소스화면

 

소스화면

 

소스화면