참조 객체를 활용한 셀렉트 박스

🔗 요구사항 확인

✏️ Select 박스 구현

📍 Controller 계층

• DeliveryCode 를 필드값을 넣어 생성해 List 에 add 하고 model 에 넘겨준다.

    @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;
    }

📍Web 계층 - add item

• select box 는 select 라는 태그를 제공하고 있다.
  • select 태그 내의 option 태그를 사용해 원하는 항목을 랜더링 할 수 있다.
  • option 태그의 속성으로 each 를 사용해 Collection 의 index 를 편리하게 입력시킬 수 있다.

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

</select>

📍 소스 확인

• field 의 기능으로 Id 와 name 이 잘 생성되었다.
• each 를 통해 list 에 add 한 값이 잘 입력 되었다.

<select class="form-select" 
        id="deliveryCode" 
        name="deliveryCode">

    <option value="">=== 배송 방식 선택 ===</option>
    <option value="FAST">빠른 배송</option>
    <option value="NORMAL">일반 배송</option>
    <option value="SLOW">느린 배송</option>

</select>

✏️ 수정, 조회 추가

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

</select>

<!-- item (disabled 추가) --> 
<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}"></option>

</select>