참고
더보기
Spring Boot & Thymeleaf 시리즈는 김영한 님의 "스프링 MVC 2편 - 백엔드 웹 개발 활용 기술" 강의를 정리한 글입니다. 글에 첨부된 사진은 해당 강의의 강의 자료에서 캡쳐한 것입니다. 제 Github에만 올려뒀다가, 정보 공유와 강의 홍보(?)를 위해 블로그에도 업로드합니다.
마크다운 형식으로 작성한 글을 블로그에 다시 올리는 거라 가독성이 많이 떨어집니다. 조금더 편하게 보시려면 아래의 Github repository에서 보시면 됩니다.
타임리프 - 셀렉트 박스
셀렉트 박스는 선택지가 많은 경우, 선택지 중 하나를 선택할 때 유용하다. 자바 객체를 활용해서 셀렉트 박스를 개발해보자.
요구사항 일부
- 배송 방식
- 빠른 배송
- 일반 배송
- 느린 배송
- 셀렉트 박스로 하나만 선택할 수 있다.
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"
속성을 추가한다.
'Spring > Spring Boot & Thymeleaf' 카테고리의 다른 글
[Spring Boot & Thymeleaf] 22. 라디오 버튼 (0) | 2022.10.24 |
---|---|
[Spring Boot & Thymeleaf] 21. 체크 박스 다중 선택 (0) | 2022.10.24 |
[Spring Boot & Thymeleaf] 20. 체크 박스 단일 선택 (0) | 2022.10.24 |
[Spring Boot & Thymeleaf] 19. 체크 박스, 라디오 버튼, 셀렉트 박스 (1) (0) | 2022.10.24 |
[Spring Boot & Thymeleaf] 18. 타임리프 입력 폼 (0) | 2022.10.24 |
댓글