HTML DOM selectedIndex 속성이란?
HTML DOM의 selectedIndex 속성은 HTML 문서 내 드롭다운 목록(select 요소)에서 현재 선택된 옵션의 인덱스를 반환하거나 수정할 때 사용됩니다. 이 속성을 활용하면 사용자가 어떤 항목을 선택했는지 프로그래밍 방식으로 확인할 수 있고, 반대로 원하는 항목을 코드로 강제 선택하게 만들 수도 있습니다.
알아두면 좋은 특징
- 인덱스는 0부터 시작합니다. 즉, 첫 번째 옵션의 인덱스는 0입니다.
- 어떤 옵션도 선택되어 있지 않으면 -1을 반환합니다.
- 숫자 값을 할당하면 해당 인덱스에 위치한 옵션이 자동으로 선택됩니다.
문법(Syntax)
selectedIndex 속성의 기본 문법은 다음과 같습니다.
1. selectedIndex 값 가져오기(반환)
object.selectedIndex
2. selectedIndex 값 설정하기(수정)
object.selectedIndex = "number"
예제
다음은 HTML DOM select 객체의 selectedIndex 속성을 활용한 예제입니다. 버튼을 클릭하면 드롭다운 목록에서 인덱스 3에 해당하는 옵션이 자동으로 선택됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129,125,254,1) 0%, rgba(111,167,254,1) 90% ) no-repeat;
height:100%;
}
p{
font-weight:700;
font-size:1.1rem;
}
.drop-down{
display:block;
width:35%;
border:2px solid #fff;
font-weight:bold;
padding:2px;
margin:1rem auto;
outline:none;
}
.btn{
background:orange;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
font-weight:bold;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM Select selectedIndex property Demo</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down' name="Drop Down List">
<option>Physics</option>
<option>Maths</option>
<option>Chemistry</option>
<option>English</option>
<option>Economics</option>
<option>Hindi</option>
<option>Biology</option>
</select>
<button type="button" onclick="set()" class="btn">Set selectedIndex</button>
<div class="show"></div>
<script>
function set() {
var dropDown = document.querySelector(".drop-down");
document.querySelector(".show").innerHTML="put selectedIndex = '3'";
dropDown.selectedIndex="3";
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
여기서 “Set selectedIndex” 버튼을 클릭해 보세요. 그러면 스크립트의 set() 함수가 실행되어 드롭다운 목록에 selectedIndex='3'이 설정됩니다. 인덱스는 0부터 시작하므로, Physics(0), Maths(1), Chemistry(2)에 이어 네 번째 항목인 English가 자동으로 선택되는 것을 확인할 수 있습니다.
정리
selectedIndex 속성은 드롭다운 목록의 상태를 읽고 쓸 수 있는 간단하면서도 강력한 도구입니다. 폼 유효성 검사, 초기값 설정, 사용자 선택 값 추적 등 다양한 상황에서 유용하게 활용할 수 있으니 꼭 익혀두시기 바랍니다.