Thymeleaf에서 선택 및 옵션 작업

1. 개요

Thymeleaf는 Spring Boot와 함께 번들로 제공되는 매우 인기있는 템플릿 엔진입니다. 우리는 이미 그것에 대한 많은 기사를 게시했으며 Baeldung의 Thymeleaf 시리즈를 살펴볼 것을 적극 권장합니다.

이 튜토리얼에서는 Thymeleaf에서 선택옵션 태그 로 작업하는 방법을 살펴볼 것입니다.

2. HTML 기초

HTML에서 여러 값이있는 드롭 다운 목록을 만들 수 있습니다.

 Apple Banana Orange Pear 

각 목록은 선택 및 중첩 옵션 태그 로 구성됩니다 . 기본적으로 웹 브라우저는 첫 번째 옵션이 미리 선택된 목록을 렌더링합니다 .

selected 속성 을 사용하여 선택 되는 값을 제어 할 수 있습니다 .

Orange

또한 disabled 속성 을 사용하여 옵션을 선택할 수 없도록 지정할 수 있습니다 .

Please select...

3. 타임 리프

Thymleaf에서 th : ​​field 속성을 사용 하여 뷰를 모델과 바인딩 할 수 있습니다.

위의 예에서는 템플릿 엔진을 사용할 필요가 없지만 따라야 할 고급 예에서는 Thymeleaf의 힘을 확인할 수 있습니다.

3.1. 선택 하지 않은 옵션

더 많은 옵션을 선택할 수있는 시나리오를 생각하면 모든 옵션을 표시하는 깔끔하고 깔끔한 방법은 th : ​​valueth : ​​text 와 함께 th : ​​each 속성 을 사용하는 것입니다 .

위의 예에서는 0에서 100까지의 숫자 시퀀스를 사용하고 있습니다. 각 숫자 i옵션 태그의 속성에 할당 하고 표시된 값과 동일한 숫자를 사용합니다.

Thymeleaf 코드는 브라우저에서 다음과 같이 렌더링됩니다.

 0 1 2 ... 100 

이 예제를 create 로 생각해 봅시다 . 즉, 새 양식으로 시작하고 백분율 값을 미리 선택할 필요가 없습니다 .

3.2. 선택한 옵션

지금 업데이트 기능을 사용하여 양식을 확장하려는 경우 , 즉 이전에 만든 레코드로 돌아가서 양식을 기존 데이터로 채우려면 옵션을 선택해야합니다 .

몇 가지 조건과 함께 th : ​​selected 속성을 추가하여이를 달성 할 수 있습니다 .

위의 예에서는 i 가 75 인지 확인하여 75의 값을 미리 선택하려고합니다 .

그러나이 코드는 작동하지 않으며 렌더링 된 HTML은 다음과 같습니다.

 0 ... 74 75 76 ... 100 

이 문제를 해결하려면 th : ​​field 를 제거 하고 nameid 속성으로 대체해야 합니다.

결국 우리는 다음을 얻게 될 것입니다.

 0 ... 74 75 76 ... 100 

4. 결론

이 짧은 기사에서는 Thymeleaf에서 드롭 다운 / 목록 선택기로 작업하는 방법을 확인했습니다. 값을 미리 선택하는 데는 한 가지 일반적인 함정이 있습니다.

항상 그렇듯이 토론 중에 사용 된 코드는 GitHub에서 찾을 수 있습니다.