본문 바로가기
JAVASCRIPT & JQUERY

Select문으로 일정한 시간 설정 방법

by GoodDayDeveloper 2020. 10. 2.
반응형

Select문으로 일정한 시간 설정 방법

 

홈페이지 제작 시, 시간을 일정 간격으로 설정해야하는 일이 아래와 같이 있을 수 있습니다.

select 문으로 시간을 설정해야하는데 이 경우는 좀 난해하더라구요..

초보자에게 있어서는 쉬우면서도 조금 어려울 수 있는 부분을 정리해보았습니다.

 

 

 

요약하자면

  • Select 문에 디비 컬럼을 넣어주고,
  • 중복 forEach문으로 ij의 변수 값을 넣어 돌려줍니다.

J 값을 ${j*30}으로 설정해주면 일단은 원하는대로 30분 간격으로 나옵니다.

하지만 제가 원하는건 14:00 ~ 17:00시 까지인데 여기까지만하면 14:00 ~ 17:30분까지 나타나게 됩니다.

여기서 가장 중요한 포인트는 breakpoint부분입니다.

breakpoint라는 변수를 선언하여 breakpoint값이 0일 때 동작할 수 있도록 설정합니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<tr>
<th scope="row" class="t_c"> </th>
<td class="form-inline" >
<span>
<select id="thru_time" name="thru_time" class="form-control w100">
<c:set var="breakPoint" value="0" />
<c:forEach var="i" begin="14" end="17">
    <c:forEach var="j" begin="0" end="1">
        <c:if test="${(i == 17) && (j == 1)}">    
            <c:set var="breakPoint" value="1" />                                    
        </c:if>
        <c:if test="${breakPoint == 0}">    
                                        
            <option value="${i}:<fmt:formatNumber pattern="00" value="${j*30}" />">${i}:<fmt:formatNumber pattern="00" value="${j*30}" /></option>                                                                            
        </c:if>
    </c:forEach>
</c:forEach>
</select>
</span>
</td>
</tr>
 
cs

 

반응형

댓글