• 카테고리

    질문 & 답변
  • 세부 분야

    백엔드

  • 해결 여부

    미해결

select에서 sequence로 반복할경우 선택된 값이 보여지게 할려면 어떤식으로 해야할까요?

23.10.18 00:49 작성 조회수 164

0

<select name="where" title="초급" class="sel_auto" th:field="*{beginnerCount}">
    <option value="0">초급</option>
    <option th:each="num: ${#numbers.sequence(1, 10)}" th:text="${num + '명'}" th:value="${num}">1</option>
</select>

위와같이 numbers.sequence로 1~10까지 select로 만들었는데

서버에서 th:field=*{beginnerCount} 값을 받아와서 만약 받아온 값이 5라고 하면 5가 선택되어지도록 하고 싶은데

이럴 경우에는 어느부분을 수정을 해야 서버에서 받은 값이 선택이 되어질까요?

 

 

 

답변 2

·

답변을 작성해보세요.

0

David님의 프로필

David

2023.10.22

안녕하세요. 인프러너님, 공식 서포터즈 David입니다.

본 강의 라디오 버튼 편 후반부를 참고하셔서 적용해 보시겠어요?

th:field, th:value가 같으면 checked 처리됩니다.

https://www.inflearn.com/course/lecture?courseSlug=%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2&unitId=83279&tab=curriculum

셀렉트 박스도 동일한 방식으로 동작할 것을 예상합니다:)

감사합니다.

답변 감사합니다.

링크 걸어주신 강의를 보고 해결이 안되서 인터넷을 검색하고 하다가 도저히 해결 방법을 찾지 못해서 글을 적었었습니다.

위 소스에서

<option th:each="num: ${#numbers.sequence(1, 10)}" th:text="${num + '명'}" th:value="${beginnerCount}">1</option>

이런식으로 수정을 했었는데 안되더라구요..

David님의 프로필

David

2023.10.22

th:field 속성도 함께 사용해 보셨을까요?

상단에 th:field를 넣었었는데 안되더라구요

th:selected="${num == boName.middleCount}"

이런식으로 vo 까지 적어서 th:selected로 하니까 적용이 되더라구요.

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2023.10.20

안녕하세요 인프러너님, 인프런 AI 인턴이에요.
선택된 값을 보여주기 위해서는 해당 옵션의 “selected” 속성을 추가해야 합니다. 예를 들어, 서버에서 받은 값이 5라고 가정하면 아래와 같이 코드를 수정하면 됩니다.

<select name="where" title="초급" class="sel_auto" th:field="*{beginnerCount}">
    <option value="0">초급</option>
    <option th:each="num: ${#numbers.sequence(1, 10)}" th:text="${num + '명'}" th:value="${num}" th:selected="${num == beginnerCount}">1</option>
</select>

위의 코드에서 th:selected="${num == beginnerCount}" 부분을 추가하면 서버에서 받아온 값이 num과 같을 경우 해당 옵션이 선택되어지게 됩니다. 이렇게 수정하면 서버에서 받은 값에 따라 선택된 값이 보여지게 됩니다. 감사합니다!

<select name="where" title="초급" class="sel_auto" th:field="*{beginnerCount}">
    <option value="0">초급</option>
    <option th:each="num: ${#numbers.sequence(1, 10)}" th:text="${num + '명'}" th:value="${num}" th:selected="${num == voName.beginnerCount}">1</option>
</select>

이런식으로 하니까 해결 됐네요.