반응형
년도 selectbox 만들기
selectbox의 option값에 고정된 년도값이 아닌 유동적으로 변하는 select년도를 만들었습니다.
1. 처음 세팅은 현재년도를 기준으로 함
2. 선택된 년도를 기준으로 -2년, +5년을 세팅
3. 년도가 바뀌더라도 2번의 기준을 그대로 따라감
<html>
<head>
<meta charset="utf-8"/>
<title>년도 SELECTBOX 만들기</title>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var date = new Date();
var selYear = date.getFullYear();
// 현재년도를 기준으로 호출
getYears(selYear);
// 현재 년도를 select 함.
$('#yearBox').val(selYear);
// 바뀐 년도를 기준으로 다시 option을 세팅함
$('#yearBox').change(function(){
var chgYear = $(this).val();
getYears(chgYear);
$('#yearBox').val(chgYear);
});
});
function getYears(getY){
// 기존 optopn을 삭제함
$("#yearBox option").remove();
// 올해 기준으로 -2년부터 +5년을 보여줌.
var stY = Number(getY)-2;
var enY = Number(getY)+5;
for(var y = stY; y <= enY; y++){
$('#yearBox').append("<option value='"+ y +"'>"+ y + " 년" +"</option>");
}
}
</script>
<style>
</style>
</head>
<body>
<select id="yearBox"></select>
</body>
</html>
▶실행결과
년도 생성 참고자료 : choija.tistory.com/74
반응형
'개발공부 > 프론트엔드' 카테고리의 다른 글
| [javascript] 배열 추가 push(), unshift() (0) | 2021.08.23 |
|---|---|
| [jQuery] 요소찾기 (0) | 2021.07.28 |
| [fullpage.js] fullpage.js 사용으로 인해, 모바일에서 메뉴 스크롤 안될 때 (0) | 2020.06.01 |
| [JAVASCRIPT] 자바스크립트 타이머 만들기 (6) | 2020.01.29 |
| [CSS] opacity 배경만 투명하게/ 배경만 opacity 적용 (0) | 2019.11.25 |