드롭다운 목록(선택 목록)에서 사용자가 선택한 옵션의 인덱스를 확인해야 하는 경우가 종종 있습니다. JavaScript에서는 selectedIndex 속성을 사용하면 이 값을 손쉽게 가져올 수 있습니다.
selectedIndex 속성이란?
selectedIndex 속성은 <select> 요소에서 현재 선택된 옵션의 인덱스를 반환합니다. 인덱스는 0부터 시작하며, 즉 첫 번째 옵션은 0, 두 번째 옵션은 1과 같이 순서대로 번호가 매겨집니다. 아무것도 선택되지 않은 경우에는 -1이 반환됩니다.
예제 코드
아래 예제는 드롭다운 목록에서 옵션을 선택한 후 버튼을 클릭하면 해당 옵션의 인덱스를 화면에 표시하는 코드입니다.
<!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 index = document.getElementById("selectNow").selectedIndex;
document.write(index);
}
</script>
</body>
</html>코드 설명
위 코드의 핵심 부분은 다음 한 줄입니다.
var index = document.getElementById("selectNow").selectedIndex;getElementById() 메서드로 ID가 selectNow인 <select> 요소를 가져온 뒤, selectedIndex 속성을 읽어 선택된 옵션의 인덱스를 변수에 저장합니다.
예를 들어 One을 선택하고 버튼을 클릭하면 0, Two를 선택하면 1, Three를 선택하면 2가 출력됩니다.
참고 사항
예제에서는 간단하게 결과를 보여주기 위해 document.write()를 사용했지만, 실제 프로젝트에서는 문서 전체가 덮어씌워질 수 있으므로 textContent나 innerHTML을 활용해 특정 요소에 결과를 출력하는 것이 좋습니다.