[JSTL] select 태그 반복문, option selected 주기, if, forEach, radio 태그에서 checked하기

이번 포스팅은 jsp에서 jstl을 활용해서 select박스에 특정 option 값에 서버에서 넘어온 값으로 selected해주는 방법을 알아보겠습니다. 상세페이지에서 자주 쓰이는 기법입니다. 예) 사용자가 선택지에서 선택한 값을 보여주기 및 수정 가능한 형태 등.

 

관련 포스팅

2021.10.04 - [WEB/FRONT] - [JSTL] JSTL 셋팅하는법 (pom.xml, spring, eclipse, maven)

기본 select 문

<label for="assNumber">음료</label>
  <select>
    <option value="밀크티">밀크티</option>
    <option value="라떼">라떼</option>
    <option value="아아">아아</option>
  </select>

결과 :  맨 위에 써있는 밀크티가 선택되어져 보입니다.

 

select 문에서 특정 option 선택하기

<label for="assNumber">음료</label>
  <select>
    <option value="밀크티">밀크티</option>
    <option value="라떼" selected>라떼</option>
    <option value="아아">아아</option>
  </select>

결과 : selected 를 사용한 태그가 선택되어져 있는걸 볼 수 있습니다.

 

select 문에서 <c:forEach> 사용하여 서버에서 값 불러오기

 <label for="assNumber">음료</label>
 <select>
   <option value="">선택해주세요.</option>
     <c:forEach var="list" items="${result}">
     	<option value="${list.beverage}">${list.beverage}</option>
    </c:forEach>
 </select>

${result}에는 밀크티, 라떼, 아아가 들어있습니다.

 

 

select 문에서 <c:forEach> 와 <c:if> 사용하여 선택한값 체크하기

 <label for="assNumber">음료</label>
 <select>
   <option value="">선택해주세요.</option>
   <c:forEach var="list" items="${result}">
 	  <option value="${list.beverage}" <c:if test ="${user.selectedBeberage eq list.beverage}">selected="selected"</c:if>>${list.beverage}</option>
   </c:forEach>
 </select>

${result}에는 밀크티, 라떼, 아아가 들어있습니다. ${user.selectedBeberage}에는 사용자가 선택한 음료가 들어있습니다. for문을 돌면서 일치하면 그것을 보여줍니다.

 

radio 태그에서 선택한값 체크하기

마찬가지로 radio 태그에서 선택된 값은 selected 대신에 checked을 사용해주시면 됩니다.

<li class="<c:if test="${user.selectedBeberage eq '밀크티'}">active</c:if>">
밀크티
<input type="radio"  id="check_group_01" name="check_group" value="밀크티" <c:if test="${user.selectedBeberage eq '밀크티'}">checked</c:if>>
</li>

<li class="<c:if test="${user.selectedBeberage eq '라떼'}">active</c:if>">
라떼
<input type="radio"  id="check_group_02" name="check_group" value="라떼" <c:if test="${user.selectedBeberage eq '라떼'}">checked</c:if>>
</li>

<li class="<c:if test="${user.selectedBeberage eq '아아'}">active</c:if>">
아아
<input type="radio" id="check_group_03" name="check_group" value="아아" <c:if test="${user.selectedBeberage eq '아아'}">checked</c:if> >
</li>

class에서도 <c:if>문 사용가능함을 보여드리기위해 넣어보았습니다.

 

jsp에서 jstel을 활용한 select박스 selected, radio 박스 checked, 그리고 forEach, <c:if>문까지 알아보았습니다. 감사합니다.