웹 개발을 하다 보면 사용자가 드롭다운(select)에서 어떤 항목을 선택했는지 확인해야 하는 경우가 자주 있습니다. 이번 글에서는 JavaScript를 이용해 선택된 값을 브라우저 콘솔에 출력하는 방법을 알아보겠습니다.
드롭다운(Select) 예제 마크업
먼저 다음과 같은 드롭다운이 있다고 가정해 보겠습니다.
<select onchange="selectedSubjectName()" id="subjectName">
<option>Javascript</option>
<option>MySQL</option>
<option>MongoDB</option>
<option>Java</option>
</select>여기서 핵심은 onchange 이벤트입니다. 사용자가 옵션을 변경할 때마다 selectedSubjectName() 함수가 호출되어 선택된 값을 콘솔에 기록하게 됩니다.
전체 코드 예제
선택된 값을 콘솔에 표시하는 전체 코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<select onchange="selectedSubjectName()" id="subjectName">
<option>Javascript</option>
<option>MySQL</option>
<option>MongoDB</option>
<option>Java</option>
</select>
<script>
function selectedSubjectName() {
var subjectIdNode = document.getElementById('subjectName');
var value =
subjectIdNode.options[subjectIdNode.selectedIndex].text;
console.log("The selected value=" + value);
}
</script>
</body>
</html>코드 동작 원리
핵심 로직은 selectedSubjectName() 함수 안에 있습니다.
document.getElementById('subjectName')를 통해 select 요소에 접근한 뒤, selectedIndex 속성으로 현재 선택된 옵션의 인덱스를 구합니다. 그리고 options[selectedIndex].text로 해당 옵션의 텍스트 값을 가져와 console.log()로 출력합니다.
프로그램 실행 방법
위 프로그램을 실행하려면 파일 이름을 "anyName.html(index.html)"로 저장한 후, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
이제 드롭다운에서 Java를 선택해 보겠습니다. 선택 후 콘솔에는 다음과 같이 기록됩니다.
이어서 MongoDB를 선택하면 콘솔에 MongoDB 값이 출력되는 것을 확인할 수 있습니다.
이처럼 onchange 이벤트와 selectedIndex 속성만 활용하면 별도의 라이브러리 없이도 순수 JavaScript로 드롭다운의 선택 값을 손쉽게 가져올 수 있습니다.