시간 선택할 수 있는 time select 만들기

개발사이트
링크텍스트

html

 <tr>
                    <th>교육희망일시</th>
                    <td>
                        <span class="item">
                            <div class="flex-mid gap10">
                                <span class="wrap">
                                    <label for="start_date"></label>
                                    <input type="text" name="" value="" id="start_date" class="input datepicker2" style="width:100px;"> 
                                </span>
                                <span class="wave">~</span>
                                <span class="wrap">
                                    <label for="end_date"></label>
                                    <input type="text" name="" value="" id="end_date" class="input datepicker2" style="width:100px;">
                                </span>
                            </div>
                        </span>
                        <span class="item">
                            <div class="flex-mid gap10">
                                <span class="wrap">
                                    <label for="hourSelect"></label>
                                    <select id="hourSelect"class="input" style="width:100px;">
                                        <option value="">시</option>
                                        <script>
                                            for (let i = 0; i < 24; i++) {
                                                let option = document.createElement("option");
                                                option.value = i;
                                                option.textContent = i;
                                                document.getElementById("hourSelect").appendChild(option);
                                            }
                                        </script>
                                    </select>
                                </span>
                                <span class="wrap">
                                    <label for="minuteSelect"></label>
                                    <select id="minuteSelect" class="input" style="width:100px;">
                                        <option value="">분</option>
                                        <script>
                                            for (let i = 0; i < 60; i += 5) {
                                                let option = document.createElement("option");
                                                option.value = i;
                                                option.textContent = i;
                                                document.getElementById("minuteSelect").appendChild(option);
                                            }
                                        </script>
                                    </select>
                                </span>
                                <span class="wave">~</span>
                                <span class="wrap">
                                    <label for="hourSelect2"></label>
                                    <select id="hourSelect2"class="input" style="width:100px;">
                                        <option value="">시</option>
                                        <script>
                                            for (let i = 0; i < 24; i++) {
                                                let option = document.createElement("option");
                                                option.value = i;
                                                option.textContent = i;
                                                document.getElementById("hourSelect2").appendChild(option);
                                            }
                                        </script>
                                    </select>
                                </span>
                                <span class="wrap">
                                    <label for="minuteSelect2"></label>
                                    <select id="minuteSelect2" class="input" style="width:100px;">
                                        <option value="">분</option>
                                        <script>
                                            for (let i = 0; i < 60; i += 5) {
                                                let option = document.createElement("option");
                                                option.value = i;
                                                option.textContent = i;
                                                document.getElementById("minuteSelect2").appendChild(option);
                                            }
                                        </script>
                                    </select>
                                </span>
                            </div>
                        </span>
                    </td>
                </tr>

script 로 미리 확인하기

<script>
    document.getElementById("hourSelect").addEventListener("change", function() {
        console.log("선택한 시간:", this.value + "시");
    });

    document.getElementById("minuteSelect").addEventListener("change", function() {
            console.log("선택한 분:", this.value + "분");
        });
</script>