티스토리 뷰

Web(국비)/JSP

[JSP]-onchange란?

Xion 2019. 10. 27. 20:04

이처럼, select에서 선택된 걸 변경했을 때 발생하는 이벤트입니다. 5개의 보기 중에 한개가 선택되었을 때 바로 이벤트가 발생 !

즉 value값을 넘겨줍니다.

 

SELECT BOX

SELECT BOX를 이용해 어떤 이벤트를 실행하고자 할 때는 주로 onchange 이벤트를 사용한다.

onchange는 input이나 select 등의 데이터가 변경될 때 호출되는 이벤트이다.

 

아래 예제는 OnChange()라는 함수를 만들어 셀렉트 박스의 인덱스 번호를 구해서 이미지를 바꿔봤다.

select option의 인덱스는 0부터 시작하며 라이언을 선택하면 1, 어피치를 선택하면 2가 된다.

 

document.getElementById("KaKaoF").selectedIndex는 KaKaoF라는 id값을 가진 SELECT BOX의 인덱스 번호를 가져온다.

그리고 document.getElementById("KaKaoF").options[인덱스 번호].value를 통해 선택된 값을 추출한다.

 

결과적으로

document.getElementById("KaKaoF").options[document.getElementById("KaKaoF").selectedIndex].value

는 SELECT BOX 객체의 옵션 중 선택한 인덱스 번호에 해당하는 값을 가져오는 것이다.

그리고 가져온 값을 이미지 태그에 넣어 img_out이라는 id를 가진 p태그에 뿌려줬다.

<%@page language="java" contentType="text/html; charset=euc-kr"%>
<html>
<head>
<%@include file="/common/jsp/header.jsp"%>
<title></title>
<script>    
function OnChange()
{    
  var gubun = document.getElementById("KaKaoF").options[document.getElementById("KaKaoF").selectedIndex].value;
  var img = "";
  if ( gubun != "X" ){
    img += "<img src='/sample/test/"+gubun+".jpg' style='width: 100px; height: 80px;'>";    
    document.getElementById("img_out").innerHTML = img;
  }
}
</script>
</head>
<body>
<form name=f1 style=margin:0; onsubmit="return false;" >
  <select name="KakaoF" id="KakaoF" onchange="OnChange();">           
     <option value="X">캐릭터 선택</option>    
     <option value="ryan">라이언</option>    
     <option value="peach">어피치</option>
  </select>
  <p id="img_out"></p>
</form>
</body>
</html>

<결과>

 

<라이언 선택>

 

<어피치 선택>

 

 

+ 추가로 아래와 같은 방법도 가능하다.

차이는 onchange 이벤트 발생시 select 객체를 함수(OnChange(this))로 보내서 사용하는 것이다.

function OnChange(kakao)
{    
  var gubun = kakao[kakao.selectedIndex].value;
  var img = "";
  if ( gubun != "X" ){
    img += "<img src='/sample/test/"+gubun+".jpg' style='width: 100px; height: 80px;'>";    
    document.getElementById("img_out").innerHTML = img;
  }
}


<select name="KakaoF" id=""KakaoF"" onchange="OnChange(this);">           
     <option value="X">캐릭터 선택</option>    
     <option value="ryan">라이언</option>    
     <option value="peach">어피치</option>
</select>
<p id="img_out"></p>

 

 

 


출처: https://shxrecord.tistory.com/22 [첫 발]

저작자표시

'Web(국비) > JSP' 카테고리의 다른 글

setAttribute  (0) 2019.10.30
[Java]onsubmit()이란?  (0) 2019.10.27
Redirect VS, Forward (Redirect와 forward의 차이)  (0) 2019.10.27
[JSP]post방식 데이터 값 넘기기  (0) 2019.10.25
[JSP]RequestDispatcher인터페이스란?  (0) 2019.10.25