select box

1. 셀렉트 박스

---

• 여러 선택지 중 하나를 선택하는 경우.

 

2. select 박스 추가

---

• 배송 방식
  • 빠른 배송
  • 일반 배송
  • 느린 배송
  • 셀렉트 박스로 하나만 선택이 가능.

 

3. Controller

---

• 자바 객체 사용.

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

 

 

4. addForm.html

---

• default 값
  • 아무 선택 안함
  • <option value="">==배송 방식 선택==</option>
• 여러 옵션 생성
  • th:each 활용.

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

• item.html, editForm.html에도 적용

 

 

5. 결과

---

• 랜더링 결과

        <!-- 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>
        <hr class="my-4">

        <div class="row">
            <div class="col">
                <button class="w-100 btn btn-primary btn-lg" type="submit">상품 등록</button>
            </div>
            <div class="col">
                <button class="w-100 btn btn-secondary btn-lg"
                        onclick="location.href=&#39;/form/items&#39;"
                        type="button">취소</button>
            </div>
        </div>

 

6. GitHub : 210923 select box

---

GitHub - bsh6463/Thymeleaf_Spring2