jQuery를 사용하여 드롭다운 메뉴에서 선택한 값에 따라 내용을 동적으로 변경하려면 다음과 같은 방식으로 구현할 수 있습니다.
기본 HTML 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<label for="dropdown">Choose an option:</label>
<select id="dropdown">
<option value="default">Please select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div id="content">
<p>Select an option to see the content.</p>
</div>
<script src="script.js"></script>
</body>
</html>
jQuery 스크립트 (script.js)
$(document).ready(function () {
$('#dropdown').change(function () {
// 선택된 값 가져오기
let selectedValue = $(this).val();
// 내용 변경
let content = '';
switch (selectedValue) {
case 'option1':
content = '<p>You selected <strong>Option 1</strong>.</p>';
break;
case 'option2':
content = '<p>You selected <strong>Option 2</strong>.</p>';
break;
case 'option3':
content = '<p>You selected <strong>Option 3</strong>.</p>';
break;
default:
content = '<p>Select an option to see the content.</p>';
}
// 콘텐츠 영역 업데이트
$('#content').html(content);
});
});
동작 방식
- change 이벤트
- 드롭다운의 값이 변경될 때 $('#dropdown').change() 이벤트가 트리거됩니다.
- 값 가져오기
- $(this).val()로 선택된 값을 가져옵니다.
- 내용 업데이트
- 조건문 (switch)을 사용하여 선택된 값에 따라 내용을 결정합니다.
- $('#content').html(content)로 <div id="content"> 안의 내용을 동적으로 변경합니다.
결과
- 드롭다운에서 옵션을 선택하면, 선택에 따라 <div id="content"> 안의 내용이 변경됩니다.
- 기본 상태에서는 "Select an option to see the content."라는 기본 메시지가 표시됩니다.
#jquery #change() #switch #event #html() #드롭다운메뉴
반응형
'프로그램' 카테고리의 다른 글
| jquery 라디오 버튼으로 입력 폼 변경 (0) | 2024.11.29 |
|---|---|
| jquery 체크박스 선택 시 특정 섹션 활성화/비활성화 (0) | 2024.11.27 |
| jQuery의 change() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.24 |
| jQuery의 keydown() / keyup() / keypress() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.23 |
| jQuery의 focus() / blur() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.22 |
댓글