<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>select태그의 change 이벤트</title>
</head>
<body>
<h3>select 객체에서 선택한 과일 출력</h3>
<hr/>
과일을 선택하면 이미지가 출력됩니다.
<p></p>
<form>
<select id="fruits" onchange="drawImage()">
<option value="media/strawberry.png">딸기</option>
<option value="media/banana.png" selected>바나나</option>
<option value="media/apple.png">사과</option>
</select>
<img id="fruitimage" src="media/banana.png" alt="" />
</form>
<script>
function drawImage() {
let sel = document.getElementById("fruits"); //select태그의 DOM
let img = document.getElementById("fruitimage"); //img태그의 DOM
img.src = sel.options[sel.selectedIndex].value;
/* - selectedIndex속성은 선택된 option항목의 색인번호
- options[색인번호] 속성된 선택된 option객체
*/
}
</script>
</body>
</html>