JavaScript를 활용하면 드롭다운 목록(select 요소)에서 사용자가 선택한 옵션을 손쉽게 가져와 화면에 표시할 수 있습니다. 핵심은 selectedIndex 속성과 options 컬렉션을 조합하는 것입니다.
동작 원리
드롭다운 목록에서 선택된 값을 읽어오는 과정은 다음과 같습니다.
- getElementById(): id를 기준으로 select 요소를 참조합니다.
- selectedIndex: 현재 선택된 옵션의 인덱스 번호를 반환합니다. 첫 번째 옵션은 0부터 시작합니다.
- options[selectedIndex].text: 선택된 옵션 객체의 텍스트 값에 접근합니다.
예제 코드
아래 예제는 드롭다운 목록에서 옵션을 선택한 뒤 버튼을 클릭하면, 선택된 옵션의 텍스트가 화면에 출력됩니다.
<!DOCTYPE html>
<html>
<body>
<form id="myForm">
<select id="selectNow">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<input type="button" onclick="display()" value="Click">
</form>
<p>옵션을 선택한 후 버튼을 클릭하세요.</p>
<script>
function display() {
var obj = document.getElementById("selectNow");
document.write(obj.options[obj.selectedIndex].text);
}
</script>
</body>
</html>코드 설명
버튼을 클릭하면 display() 함수가 실행됩니다. 이 함수는 먼저 document.getElementById("selectNow")를 통해 드롭다운 요소를 가져오고, obj.selectedIndex로 선택된 항목의 위치를 확인합니다. 마지막으로 obj.options[obj.selectedIndex].text를 통해 해당 옵션의 텍스트 값을 화면에 출력합니다.
참고: value 값 가져오기
만약 옵션의 텍스트가 아닌 value 속성 값이 필요하다면 .text 대신 .value를 사용하면 됩니다. 또한 최신 JavaScript에서는 document.write() 대신 textContent나 innerHTML으로 특정 요소에 결과를 출력하는 것이 권장됩니다.