Menu

TOP Notice Topic Cord self-introduction Guide Lines

Manage

Login
Cord > Study_Web 전체 다운로드
파일 목록
Study_Web > 5week/example9-19.html Lines 29 | 761 바이트
다운로드 

                        <!DOCTYPE html>
<html>

<head>
	<title>select 객체에서 선택한 과일출력</title>
	<script>
		function drawImage() {
			let sel = document.getElementById("fruits");
			let img = document.getElementById("fruitimage");
			img.src = sel.options[sel.selectedIndex].value;
		}
	</script>
</head>

<body onload="drawImage()">
	<h3>select 객체에서 선택한 과일 출력</h3>
	<hr>
	과일을 선택하면 이미지가 출력됩니다.<p>
	<form>
		<select id="fruits" onchange="drawImage()">
			<option value="media/stawberry.jpg">딸기
			<option value="media/banana.jpg">바나나
			<option value="media/apple.jpg" selected>사과
		</select>
		<img id="fruitimage" src="media/banana.gif" alt="">
	</form>
</body>

</html>