셀렉트 박스 (배송 방식 : 빠른 배송, 일반 배송, 느린 배송)

우선 item 객체에 deliveryCode를 추가해준다.

 

@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의 리스트를 넘길 수 있도록 해주는 @ModelAttribute를 만들어준다.

 

 

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

 

addForm에 위와 같은 코드를 만들어준다.

select 박스는 위와 같은 구조를 가지게 되는데 4번째 줄에서 select라고 적어주고 option 키워드를 통해 배송 방식 선택이라는 문자를 넣어준다.

그 다음에는 th:each로 반복문을 돌려서 deliveryCodes에 있는 3가지 리스트를 다 보여주게 한다.

th:text="${deliveryCode.displayName}"은 FAST가 아니라 빠른 배송으로 출력하도록 만들어준다.

 

 

 

상품 상세 페이지와 수정 페이지에도 같은 코드를 넣어준다.

 

 

 

이제 상품 등록 폼에서 배송 방식도 선택 할 수 있다.

 

상품 상세 페이지에서도 잘 나오고, 수정에서 배송 방식을 수정할 수도 있다. 물론 목록에서 상품을 볼 때에도 수정한 내용이 잘 적용된다.