JavaScript에서 <select> 요소의 옵션을 선택했을 때 숨겨져 있던 div를 화면에 표시하려면, 해당 요소의 style.display 속성값을 "block"으로 설정하면 됩니다. 반대로 다시 숨기고 싶을 때는 "none"으로 지정하면 됩니다.
예제 코드
다음은 전체 예제 코드입니다 −
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#hideValuesOnSelect {
display: none;
}
</style>
<body>
<select onchange="displayDivDemo('hideValuesOnSelect', this)">
<option value="0">Java</option>
<option value="1">Javascript</option>
</select>
<div id="hideValuesOnSelect">This is the Javascript</div>
</body>
<script>
function displayDivDemo(id, elementValue) {
document.getElementById(id).style.display = elementValue.value == 1 ? 'block' : 'none';
}
</script>
</html>실행 방법
위 코드를 anyName.html(예: index.html)이라는 이름으로 저장한 후, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server" 옵션을 선택하면 프로그램을 실행할 수 있습니다.
이 코드는 다음과 같은 초기 화면을 출력합니다 −
실행 결과
셀렉트 박스에서 두 번째 옵션인 JavaScript를 선택하면, 기본적으로 숨겨져 있던 div가 화면에 나타납니다.
동작 원리
핵심은 onchange 이벤트 핸들러입니다. 사용자가 옵션을 변경하면 displayDivDemo() 함수가 호출되고, 선택된 값(value)이 "1"이면 style.display를 "block"으로 설정하여 div를 보여주고, 그렇지 않으면 "none"으로 설정해 다시 숨깁니다. 이 방식은 폼 입력에 따라 조건부로 추가 필드나 안내 문구를 노출해야 하는 경우에 유용하게 활용할 수 있습니다.