인프런 커뮤니티 질문&답변

인프러너님의 프로필 이미지
인프러너

작성한 질문수

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술

셀렉트 박스

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

작성

·

221

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입니다.

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

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>

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

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

인프러너님의 프로필 이미지
인프러너
질문자

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

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

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

0

안녕하세요 인프러너님, 인프런 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>

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

 

 

인프러너님의 프로필 이미지
인프러너

작성한 질문수

질문하기