JavaScript 활용팁
HOME > WEB > JavaScript 활용팁
2018.11.24 / 11:32

Javascript로 SELECT(OPTION) 조작하기

hanulbit
추천 수 176

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[index].value를 통해 선택된 값을 추출한다.


결과적으로

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

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

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<%@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>
cs


<결과>


<라이언 선택>


<어피치 선택>



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

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


1
2
3
4
5
6
7
8
9
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;
  }
}
cs



1
2
3
4
5
6
<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>
cs