2022. 9. 22. 21:54ㆍjsp/jsp
이번의 목표
01. getParameter() 으로 <select>의 값을 출력해보자.
02. multiple 속성에 대해 알아보자.
지금까지 <input> type "text", "password", "checkbox", "radio" 그리고 <textarea>의 값을 출력하는 것 까지 해봤습니다.
이번엔 <select>의 값을 받아서 출력하는 것을 해보겠습니다.
<select>는 일반적으로 단일 선택을 기본으로 합니다. 하지만 경우에 따라서는 multiple="multiple" 속성을 사용하여 다중 선택을 가능하도록 하기도 합니다.
그렇기 때문에 다수의 값을 받아올 때와 하나의 값을 받아올 때의 코드가 다르게 됩니다.
그리고 <option>의 값을 불러올 때 value가 명시 되어있다면 value의 값을 우선적으로 불러오게 됩니다.
하지만 value가 명시되지 않았을 시에는 여는 태그와 닫는 태그 사이의 값을 가져옵니다.
그리고 알아볼 것은 multiple 속성입니다.
<select>를 다중 선택을 가능하도록 해야할 때 사용합니다. 사용 예시는 아래와 같습니다.
<select multiple="multiple" size="10">
여기서 size 속성은 한번에 보여줄 <option>의 수를 설정합니다.
size를 명시하지 않았을 경우 기본값은 4개 입니다.
이때에 다중 선택을 하는 방법은 세가지가 있습니다.
Ctrl 을 누른 상태로 <option>을 클릭하기, 이때는 클릭한 <option>
Shift 를 누른 상태로 <option>을 클릭하기. 이때에는 클릭한 두 <option>를 범위로 하여 선택합니다.
마지막으로는 드래그를 하는 방법이 있습니다.
01. 데이터 전송 페이지 코드
02. 데이터 출력 페이지 코드
03. 실행 화면
01. 데이터 전송 페이지 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select_form</title>
</head>
<body>
<form action="select_result.jsp" method="post">
<table>
<!-- 일반적으로 아무 속성이 부여되지 않은 상태의 예시 -->
<tr>
<td><label>학력</label></td>
<td><select name="edu">
<option>중학교 졸업</option>
<option>고등학교 졸업</option>
<option>대학교 재학중</option>
<option>대학교 휴학중</option>
<option>대학교 졸업</option>
</select></td>
</tr>
<!-- option 태그에 value를 지정했을 때의 예시 -->
<tr>
<td><label>소속 국가</label></td>
<td><select name="contry">
<option value="kor">대한민국</option>
<option value="us">미국</option>
<option value="ch">중국</option>
<option value="jp">일본</option>
</select></td>
</tr>
<!-- multiple 속성을 사용하여 다중 선택이 가능한 예시 -->
<tr>
<td><label>관심분야</label></td>
<td><select multiple="multiple" name="like" size="4">
<!--
select의 size 속성은 화면에 한번에 보여줄 옵션의 갯수를 정한다.
multiple이 없을 때에는 size의 기본값은 1이다.
multiple 속성이 있다면 size의 기본값은 4이다.
-->
<option>IT 컨설팅</option>
<option>프로그래머</option>
<option>시스템엔지니어</option>
<option>네트워크엔지니어</option>
</select></td>
</tr>
<tr>
<td><input type="submit" value="전송"> <input
type="reset" value="초기화"></td>
</tr>
</table>
</form>
</body>
</html>02. 데이터 출력 페이지 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select_reuslt</title>
</head>
<body>
<h2>입력한 정보는 아래와 같습니다.</h2>
학력 :
<%=request.getParameter("edu")%>
<br> 국가 :
<%=request.getParameter("contry")%>
<br> 관심 분야 :
<%
String likes[] = request.getParameterValues("like");
if(likes==null){
out.print("관심 분야가 없나보군요?");
return;
}
for (String like : likes) {
out.print(like + "<br>");
out.print("\t");
}
%>
</body>
</html>03. 실행 화면
① multiple 속성을 사용한 관심 분야의 <select>에선 3개의 값이 선택된 것을 확인할 수 있습니다.
② value 값을 지정한 국가 <select>에선 태그 사이의 값 대신 value가 출력되는 것을 확인할 수 있습니다.
'jsp > jsp' 카테고리의 다른 글
| 12주차 - jsp (15) 기본객체 메서드 (0) | 2022.10.13 |
|---|---|
| 12주차 - jsp (14) 속성(Attribute), Redirect와 forward (0) | 2022.09.22 |
| 12주차 - jsp (12) getParameter() 로 <input type="radio">의 값 출력하기 (0) | 2022.09.22 |
| 12주차 - jsp (11) getParameter() 로 <textarea> 의 값 출력하기 (0) | 2022.09.21 |
| 12주차 - jsp (10) getParameterValues() 로 다중 선택이 가능한 <input>의 값을 출력하기 (0) | 2022.09.21 |