[JS] select box에 생년월일 생성하는 함수

JS 썸네일

[JS] select box에 생년월일 생성하는 함수

select box에 대한 내용은 저번에 포스팅으로 한번 다룬 적이 있다.

 

오늘은 저번에 한 포스팅과 이어지는

option을 자동으로 생성하는 함수이다.

(생년월일 한정)

 

 

2021.05.26 - [웹언어/HTML] - [HTML] select 하나만 골라봐

 

준비물

1.제이쿼리 

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

 

2. 아래의 소스코드

다운받아서 링크 걸어도 되고 직접 타이핑해도 된다

 

3.html 설정

select의 id를 year, month, day로 해둘 것

 

yymmdd.js

0.00MB

사용법

[JS] 코드

$(document).ready(function(){            
    var now = new Date();
    var year = now.getFullYear();
    var mon = (now.getMonth() + 1) > 9 ? ''+(now.getMonth() + 1) : '0'+(now.getMonth() + 1); 
    var day = (now.getDate()) > 9 ? ''+(now.getDate()) : '0'+(now.getDate());           
    //년도 selectbox만들기               
    for(var i = 1900 ; i <= year ; i++) {
        $('#year').append('<option value="' + i + '">' + i + '년</option>');    
    }

    // 월별 selectbox 만들기            
    for(var i=1; i <= 12; i++) {
        var mm = i > 9 ? i : "0"+i ;            
        $('#month').append('<option value="' + mm + '">' + mm + '월</option>');    
    }
    
    // 일별 selectbox 만들기
    for(var i=1; i <= 31; i++) {
        var dd = i > 9 ? i : "0"+i ;            
        $('#day').append('<option value="' + dd + '">' + dd+ '일</option>');    
    }
    $("#year  > option[value="+year+"]").attr("selected", "true");        
    $("#month  > option[value="+mon+"]").attr("selected", "true");    
    $("#day  > option[value="+day+"]").attr("selected", "true");       
  
})

[HTML] 코드

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
 
<select name="yy" id="year"></select>년
<select name="mm" id="month"></select>월
<select name="dd" id="day"></select>일

사용법은 간단하다

 

위의 코드를 붙이기만 하면 바로 적용이 된다.

for문을 이용하여 반복하여 요소를 추가하였고

(append, for문 사용)

10보다 작은 수일 때는 0을 붙여 표현하였다.

(삼항 연산자 사용)

select에서 현재의 날짜를 선택하게 해 놓았다.

(attr 사용)

 

코드팬

See the Pen select box 생년월일 by 윤재현 (@jh91) on CodePen.