[JS] SELECTBOX 각각 년도 월 시간 생성 feat.DOM요소

1. 현재 년도부터 10년후까지 년도 SELECTBOX 만들기

<select name="busiYear" id="busiYear" >
    <option value="">사업년도</option>
</select>

    <script>
        // 현재 연도 가져오기
        var currentYear = new Date().getFullYear();

        // select 요소 참조
        var busiYearSelect = document.getElementById("busiYear");

        // 현재 연도부터 10년 후까지 옵션 추가
        for (var i = currentYear; i <= currentYear + 10; i++) {
            var option = document.createElement("option");
            option.value = i;
            option.text = i;
            busiYearSelect.appendChild(option);
        }
    </script>

년도박스

2. 월별 selectBox 만들기

<select id="regStartDt_month" >
    <option value="">월</option>
</select>

<script>
//--------------------------------------------- 월별 SELECTBOX 값 만들기
    var gnRegStartDtValue = '<%= gnRegStartDt %>';		// 날짜 데이터 yyyymmdd
    var StartDtmonth = gnRegStartDtValue.slice(4, 6); 	// 중간 2글자를 month 변수에 저장
    
    // select 요소 참조
    var regStartDtMonthSelect = document.getElementById("regStartDt_month");

    // 월을 1월부터 12월까지 생성하여 추가
    for (var month = 1; month <= 12; month++) {
        var option = document.createElement("option");
        option.value = month;
        option.text = month + "월 중";
        
     	// 만약 월이 0으로 시작한다면 0을 제거합니다.
        if (StartDtmonth.startsWith("0")) {
            StartDtmonth = StartDtmonth.substring(1); // 앞의 0을 제거하여 "5" 또는 "12"로 만듭니다.
        }
        
        regStartDtMonthSelect.appendChild(option);
    }
</script>

월별박스

3. 00:00 부터 23:30까지 30분단위로 시간만들기

내가 만드려고 했던건 시작시간~마감시간으로 2개의 selectbox가 필요했다.

<label for="regStartDt" class="blind">시작 날짜</label>
<select name="regStartDtTime" id="regStartDtTime" >
    <option value="">시작시간</option>
</select>
<label for="regEndDt" class="blind">마감 날짜</label>
<select name="regEndDtTime" id="regEndDtTime" >
    <option value="">마감시간</option>
</select>

<script>
/* 시간 SELECTBOX 값 만들기  */
// gnRegStartDtTime 값을 가져오기
var gnRegStartDtTimeValue = '<%= gnRegStartDtTime %>';  // DB에서 가져온 시작시간 데이터
var gnRegEndDtTimeValue = '<%= gnRegEndDtTime %>';		// DB에서 가져온 마감시간 데이터

// select 요소 참조
var regStartDtSelect = document.getElementById("regStartDtTime");
var regEndDtTimeSelect = document.getElementById("regEndDtTime");

// 시간을 30분 단위로 생성
for (var hour = 0; hour <= 23; hour++) {
    for (var minute = 0; minute < 60; minute += 30) {
        var option = document.createElement("option");
        var formattedHour = (hour < 10 ? "0" : "") + hour;
        var formattedMinute = (minute === 0 ? "00" : "30");
        option.value = formattedHour + ":" + formattedMinute;
        option.text = formattedHour + ":" + formattedMinute;
        
        // 옵션은 다시 사용할 수 없어서 복제 옵션 생성
        // 복제된 옵션을 생성하여 regEndDtTimeSelect에 추가
        var optionClone = option.cloneNode(true);

        regStartDtSelect.appendChild(option);
        regEndDtTimeSelect.appendChild(optionClone);
    }
}
</script>

시간박스

---

나는 게시판에 글 등록할때 년도와 시간을 선택할 수 있게만들었다.

그럼 수정했을때 선택되어있던 값과 비교하여 보여주게 하려면?

<script>

/* 사업년도 SELECTBOX 값 만들기  */
// gnBusiYear 값을 가져오기
var gnBusiYearValue = '<%= gnBusiYear %>'; // DB에서 가져온 데이터

// 현재 연도 가져오기
var currentYear = new Date().getFullYear();

// select 요소 참조
var busiYearSelect = document.getElementById("busiYear");

// 현재 연도부터 10년 후까지 옵션 추가
for (var i = currentYear; i <= currentYear + 10; i++) {
    var option = document.createElement("option");
    option.value = i;
    option.text = i;

    // gnBusiYear와 현재 연도를 비교하여 선택 여부 결정 
    if (gnBusiYearValue === i.toString()) {
        option.selected = true;
    }

    busiYearSelect.appendChild(option);
}
    
</script>

<script>
/* 시간 SELECTBOX 값 만들기  */
// gnRegStartDtTime 값을 가져오기
var gnRegStartDtTimeValue = '<%= gnRegStartDtTime %>';  // DB에서 가져온 시작시간 데이터
var gnRegEndDtTimeValue = '<%= gnRegEndDtTime %>';		// DB에서 가져온 마감시간 데이터

// select 요소 참조
var regStartDtSelect = document.getElementById("regStartDtTime");
var regEndDtTimeSelect = document.getElementById("regEndDtTime");

// 시간을 30분 단위로 생성
for (var hour = 0; hour <= 23; hour++) {
    for (var minute = 0; minute < 60; minute += 30) {
        var option = document.createElement("option");
        var formattedHour = (hour < 10 ? "0" : "") + hour;
        var formattedMinute = (minute === 0 ? "00" : "30");
        option.value = formattedHour + ":" + formattedMinute;
        option.text = formattedHour + ":" + formattedMinute;

        // gnRegStartDtTimeValue와 gnRegEndDtTimeValue와 비교하여 선택 여부 결정
        if (gnRegStartDtTimeValue === option.value) {
            option.selected = true;
        }
        
        // 옵션은 다시 사용할 수 없어서 복제 옵션 생성
        // 복제된 옵션을 생성하여 regEndDtTimeSelect에 추가
        var optionClone = option.cloneNode(true);

        // gnRegEndDtTimeValue와 비교하여 선택 여부 결정
        if (gnRegEndDtTimeValue === option.value) {
            optionClone.selected = true;
        }

        regStartDtSelect.appendChild(option);
        regEndDtTimeSelect.appendChild(optionClone);
    }
}
</script>

게시판 DB에서 가져온 값과 생성한값을 비교하여 selected 해주면 된다.

 

 

TIP!

DOM 요소 사용시 시 주의해야할 점 

encaught TypeError: Cannot read properties of null (reading 'appendChild')

위 에러는 HTML 문서가 완전히 로드되기 전에 실행되었을 때 발생할 수 있다.

보통 이 오류는 DOM 요소를 참조하려고 할 때 해당 요소가 아직 존재하지 않을 때 발생한다.

해결하려면 스크립트를 실행할 때 DOM 요소가 로드된 후에 실행 ! 

<script> 요소를 <body> 요소 끝에 배치하거나 DOMContentLoaded 이벤트를 사용하여 스크립트가 실행될 때 DOM이 준비되었는지 확인할 수 있다.

 

 

---

공부하면서 유용했던 부분 메모겸 공유하고자 끄적입니다.

고쳐야하는 부분있다면 댓글 남겨주시면 수정하겠습니다.

행복한 하루 보내세요 (❁´◡`❁)