jQuery change 이벤트 예제 (드롭다운 선택 시 이미지 변경)
이번에는 jQuery의 change 이벤트를 활용해서
드롭다운에서 선택한 값에 따라 이미지를 바꾸는 예제를 만들어 보았습니다.
📌 change 이벤트란?
- <select>, <input>, <textarea> 등의 값이 변경될 때 발생하는 이벤트입니다.
- 사용자가 드롭다운에서 옵션을 선택하거나, 입력창의 값이 바뀔 때 자동으로 실행됩니다.
기본 문법
$('#요소id').change(function(){
// 값이 변경되었을 때 실행할 코드
});📌 예제 1: ch5 Ex07_change.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex07_change.html</title>
<style type="text/css">
img {
width: 80px; height: 80px; margin-left: 50px;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
// id="sel" 요소의 값이 바뀌었을 때(change 이벤트 발생)
$(function(){
$('#sel').change(function(){
// 현재 선택된 option의 value 값을 가져옴
let imgSrc = $(this).val();
// img 태그의 src 속성을 변경
$('#img').attr('src','../images/' + imgSrc);
});
});
</script>
</head>
<body>
<form name="frm">
<table>
<tr>
<td>
<select id="sel">
<option value="strawberry.gif">딸기</option>
<option value="banana.gif">바나나</option>
<option value="apple.gif" selected>사과</option>
</select>
</td>
<td>
<img id="img">
</td>
</tr>
</table>
</form>
</body>
</html>📌 실행 흐름
- 사용자가 드롭다운에서 과일 이름을 선택한다.
- change 이벤트 발생 → $(this).val() 로 선택된 옵션의 value 가져오기.
- 예: "딸기" 선택 → "strawberry.gif" 값 반환
- $('#img').attr('src', '../images/' + imgSrc) 실행 → 이미지 변경
- 결과: <img> 태그에 ../images/strawberry.gif 가 표시됨.
📌 실행 결과 (예시)
- "딸기" 선택 → 🍓 딸기 이미지 표시
- "바나나" 선택 → 🍌 바나나 이미지 표시
- "사과" 선택 → 🍎 사과 이미지 표시
'기초 및 언어 > ▶ JavaScript&JQuery' 카테고리의 다른 글
| 10. Jquery_ .animate()를 활용한 이미지 슬라이드 (0) | 2025.09.09 |
|---|---|
| 09. jQuery_ .show() 와 .hide() 사용 (1) | 2025.09.09 |
| 07. jQuery_bind() (1) | 2025.09.09 |
| 06. JQuery_ .empty() 와 .remove() (0) | 2025.09.09 |
| 05. jQuery에서 children() vs find() 차이 정리 (0) | 2025.09.08 |