Spring MVC - 타임리프(Thymeleaf)을 사용한 Select box(셀렉트 박스)

 

 

 

 

타임리프(Thymeleaf)를 사용한 Select box(셀렉트 박스)

 

 

 

 셀렉트 박스는 여러 선택지 중에 하나를 선택할 때 사용할 수 있다. 자바 객체를 활용해서 셀렉트 박스를 사용해 보자.

 

 

/**
 * FAST: 빠른 배송
 * NORMAL: 일반 배송
 * SLOW: 느린 배송
 */

@Data
@AllArgsConstructor
public class DeliveryCode {

    private String code;
    private String displayName;

}

• Select Box을 설명하기 위해 생성한 클래스

 

    @ModelAttribute("deliveryCodes")
    public List<DeliveryCode> deliveryCodes() {
        List<DeliveryCode> deliveryCodes = new ArrayList<>();
        deliveryCodes.add(new DeliveryCode("FAST", "빠른 배송"));
        deliveryCodes.add(new DeliveryCode("NORMAL", "일반 배송"));
        deliveryCodes.add(new DeliveryCode("SLOW", "느린 배송"));
        return deliveryCodes;
    }

• DeliveryCode를 타임리프에서 사용하기 위해 컨트롤러에 코드 추가
• 컨트롤이 호출할 때마다 자동으로 실행되어 Model에 return 된 객체를 담아준다.
• Select Box를 설명하기 위한 작성한 코드로 좋은 방법은 아니다

 

<select th:field="*{deliveryCode}" class="form-select">

• Select Box를 사용하기 위한 <select> 태그
• th:field="*{deliveryCode}" 값과 일치한 <option>태그의 th:value를 선택

 

<option value="">==배송 방식 선택==</option>

• 기본 선택 option

 

<option th:each="deliveryCode : ${deliveryCodes}" th:value="${deliveryCode.code}" th:text="${deliveryCode.displayName}">FAST</option>

• deliveryCodes 리스트에 저장된 데이터 수만큼 <option> 태그 생성
  th:value="${deliveryCode.code}" : "FAST", "NORMAL", "SLOW"
  th:text="${deliveryCode.dispalyName}" : "빠른 배송", "일반 배송", "느린 배송"

반응형

전체 코드

<div>
    <div>배송 방식</div>
    <select th:field="*{deliveryCode}" class="form-select">
        <option value="">==배송 방식 선택==</option>
        <option th:each="deliveryCode : ${deliveryCodes}" th:value="${deliveryCode.code}"
                th:text="${deliveryCode.displayName}">FAST</option>
    </select>
</div>

 서버를 가동시켜 웹브라우저에서 HTML의 소스 코드를 보면 다음과 같다.

<!-- SELECT -->
<div>
    <div>배송 방식</div>
    <select class="form-select" id="deliveryCode" name="deliveryCode">
        <option value="">==배송 방식 선택==</option>
        <option value="FAST">빠른 배송</option>
        <option value="NORMAL">일반 배송</option>
        <option value="SLOW">느린 배송</option>
    </select>
</div>

 

빠른 배송 option 선택한 경우 로그 값