1. 개요
Thymeleaf는 Spring Boot와 함께 번들로 제공되는 인기 있는 템플릿 엔진입니다. 우리는 이미 그것에 대해 여러 기사를 게시했으며 Baeldung의 Thymeleaf 시리즈 를 검토 하는 것이 좋습니다 .
이 예제에서는 Thymeleaf에서 선택 및 옵션 태그로 작업하는 방법을 배웁니다.
2. HTML 기초
HTML에서는 여러 값으로 드롭다운 List을 작성할 수 있습니다.
<select>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="pear">Pear</option>
</select>각 List은 선택 및 중첩된 옵션 태그로 구성됩니다. 기본적으로 웹 브라우저는 첫 번째 옵션이 미리 선택된 List을 렌더링합니다 .
selected 속성 을 사용하여 어떤 값이 선택되는지 제어할 수 있습니다 .
<option value="orange" selected>Orange</option>또한 disabled 속성 을 사용하여 옵션을 선택할 수 없도록 지정할 수 있습니다 .
<option disabled>Please select...</option>3. 백리향
Thymeleaf에서는 th:field 속성을 사용하여 뷰와 모델을 결합할 수 있습니다.
<select th:field="*{gender}">
<option th:value="'M'" th:text="Male"></option>
<option th:value="'F'" th:text="Female"></option>
</select>위의 예제에서는 템플릿 엔진을 사용할 필요가 없지만 다음 고급 예제에서는 Thymeleaf의 강력한 기능을 볼 수 있습니다.
3.1. 선택 하지 않은 옵션
선택할 수 있는 옵션이 더 많은 시나리오에서 모든 옵션을 표시하는 깔끔하고 깨끗한 방법은 th:value 및 th:text 와 함께 th:each 속성을 사용하는 것입니다 .
<select th:field="*{percentage}">
<option th:each="i : ${#numbers.sequence(0, 100)}" th:value="${i}" th:text="${i}">
</option>
</select>위의 예에서는 0부터 100까지 일련의 숫자를 사용했습니다. 각 숫자 i 의 값 을 옵션 태그의 value 속성에 할당하고 표시된 값과 동일한 숫자를 사용했습니다.
Thymeleaf 코드는 브라우저에서 다음과 같이 렌더링됩니다.
<select id="percentage" name="percentage">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
...
<option value="100">100</option>
</select>이 예제를 create 로 생각해 봅시다 . 따라서 새 양식으로 시작하고 백분율 값을 미리 선택할 필요가 없습니다 .
3.2. 선택한 옵션
업데이트 기능 으로 양식을 확장한다고 가정 합니다. 이전에 만든 레코드로 돌아가서 기존 데이터로 양식을 채우 려면 옵션을 선택해야 합니다 .
몇 가지 조건과 함께 th:selected 속성 을 추가하여 이를 달성할 수 있습니다 .
<select th:field="*{percentage}">
<option th:each="i : ${#numbers.sequence(0, 100)}" th:value="${i}" th:text="${i}"
th:selected="${i==75}"></option>
</select>위의 예에서 i 가 75와 같은지 확인하여 75의 값을 미리 선택하려고 합니다.
그러나 이 코드는 작동하지 않으며 렌더링된 HTML은 다음과 같습니다.
<select id="percentage" name="percentage">
<option value="0">0</option>
...
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
...
<option value="100">100</option>
</select>이를 수정하려면 th:field 를 제거하고 name 및 id 속성 으로 교체해야 합니다.
<select id="percentage" name="percentage">결국, 우리는 얻을 것입니다:
<select id="percentage" name="percentage">
<option value="0">0</option>
...
<option value="74">74</option>
<option value="75" selected="selected">75</option>
<option value="76">76</option>
...
<option value="100">100</option>
</select>4. List으로 드롭다운 채우기
이제 Thymeleaf의 List으로 드롭다운을 채우는 방법을 살펴보겠습니다. 이를 위해 컨트롤러에 문자열 List을 만들고 보기에 표시합니다.
먼저 문자열 List을 초기화하는 메서드를 사용하여 컨트롤러를 만듭니다. 그런 다음 모델 속성을 사용하여 뷰 내에서 렌더링할 List을 보유합니다.
@RequestMapping(value = "/populateDropDownList", method = RequestMethod.GET)
public String populateList(Model model) {
List<String> options = new ArrayList<String>();
options.add("option 1");
options.add("option 2");
options.add("option 3");
model.addAttribute("options", options);
return "dropDownList/dropDownList.html";
}마지막으로 List 모델 속성을 참조하고 이를 반복하여 각 List 요소를 드롭다운 옵션으로 표시할 수 있습니다.
<select class="form-control" id="dropDownList">
<option value="0">select option</option>
<option th:each="option : ${options}" th:value="${option}" th:text="${option}"></option>
</select>5. 결론
이 간단한 기사에서는 Thymeleaf에서 드롭다운/List 선택기로 작업하는 방법을 설명했습니다. 또한 값을 미리 선택하는 일반적인 함정에 대해 논의하고 그에 대한 솔루션을 통해 작업했습니다.
항상 그렇듯이 이 기사에서 사용된 코드는 GitHub 에서 찾을 수 있습니다 .
