[Spring Boot & Thymeleaf] 23. 셀렉트 박스

참고

Spring Boot & Thymeleaf 시리즈는 김영한 님의 "스프링 MVC 2편 - 백엔드 웹 개발 활용 기술" 강의를 정리한 글입니다. 글에 첨부된 사진은 해당 강의의 강의 자료에서 캡쳐한 것입니다. 제 Github에만 올려뒀다가, 정보 공유와 강의 홍보(?)를 위해 블로그에도 업로드합니다.

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의

마크다운 형식으로 작성한 글을 블로그에 다시 올리는 거라 가독성이 많이 떨어집니다. 조금더 편하게 보시려면 아래의 Github repository에서 보시면 됩니다.

GitHub - Kloong1/TIL: Today I Learned.

타임리프 - 셀렉트 박스

셀렉트 박스는 선택지가 많은 경우, 선택지 중 하나를 선택할 때 유용하다. 자바 객체를 활용해서 셀렉트 박스를 개발해보자.

요구사항 일부

• 배송 방식
  • 빠른 배송
  • 일반 배송
  • 느린 배송
  • 셀렉트 박스로 하나만 선택할 수 있다.

FormItemController.java 내용 추가

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

• @ModelAttribute 가 붙은 메소드를 사용해서 뷰에 넘겨준다.

셀렉트 박스 적용

상품 등록

form/addForm.html 내용 추가

<!-- SELECT -->
<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>

• <select> 태그를 사용한다.
• th:field , th:value , th:text 를 사용했다.

타임리프 렌더링 결과

<!-- 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>

• th:field 에 의해 id 와 name 이 추가되었다.

상품 상세 정보

form/item.html 내용 추가

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

• disabled 를 추가하고 *{deliverycode} 를 ${item.deliverCode} 로 수정했다.

상품 수정

form/editForm.html 내용 추가

<!-- SELECT -->
<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>

• 상품 등록과 동일한 내용이다.

타임리프 렌더링 결과

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

• <select> 의 th:field="*{deliveryCode}" 의 값과 th:value="${deliveryCode.code}" 값을 비교해서, 같으면 selected="selected" 속성을 추가한다.