select 이미지



"> 09-11_select-onchange

select 이미지



"> 09-11_select-onchange

select 이미지



"> 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>09-11_select-onchange</title>
<style type="text/css">
body { font-size: 24px; }

</style>
</head>
<body>
	<h1>select 이미지</h1>
	<form action="#">
		<select id="fruits" onchange="selectImage()">
			<option value="../../image/event_image/strawberry.png">딸기</option>
			<option value="../../image/event_image/apple.png">사과</option>
			<option value="../../image/event_image/banana.png">바나나</option>
		</select>
		<br/><br/>
		<img id="fruits_image" src="../../image/event_image/strawberry.png">
	</form>
	<!-- Javascript -->
	<script type="text/javascript">
		/*
			# selectedIndex
			- select 태그에서 선택된 값의 index를 반환.
		*/
		function selectImage(){
			let sel = document.getElementById('fruits');
			let img = document.getElementById('fruits_image');
			img.src = sel.options[sel.selectedIndex].value;
		}
	</script>
</body>
</html>