JQuery

[jQuery] change

NamGH 2023. 9. 22. 10:31
change : 값이 변경될 때 실행할 이벤트 핸들러를 연결한다(collback 함수)

매개변수

이벤트가 발생했을때 실행되는 함수

 

예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	img{
		width: 80px;
		height: 80px;
		margin-left: 50px;
	}
</style>
<script src = ../js/jquery.js type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		$('#sel').change(function(){
			$('#img').attr("src",'../images/'+$(this).attr('value'));
		}).change();
	});
</script>
</head>
<body>
	<form>
		<table>
			<tr>
				<td>
					<select id = "sel">
						<option value = "strawberry.gif" selected>딸기
						<option value = "banana.gif">바나나
						<option value = "apple.gif">사과
					</select>
					<td><img id = "img">
			</tr>
		</table>
	</form>
</body>
</html>

 

결과
초기 화면
바나나 선택시
코드 설명
line17 : 선택한 항목의 value값을 가져와서 img의 src속성으로 넣기위해 사용
line18 : 딸기에 selected를 사용하여 초기화면에 딸기를 넣기위해 .change()로 강제호출