드롭다운 목록의 선택된 항목 번호

셀렉트에는 현재 선택된 목록 항목의 번호를 저장하는 특별한 속성 selectedIndex가 있습니다. 번호는 0부터 시작합니다. 이 속성은 읽을 수 있을 뿐만 아니라, 선택된 목록 항목을 변경하기 위해 쓸 수도 있습니다.

예제를 통해 이 속성 사용법을 살펴보겠습니다. 다음과 같은 드롭다운 목록이 주어졌다고 가정해 봅시다:

html<select id="select">
  <option value="one">하나</option>
  <option value="two" selected>둘</option>
  <option value="three">셋</option>
</select>

선택된 목록 항목의 번호를 출력해 봅시다:

javascriptlet select = document.querySelector('#select');
console.log(select.selectedIndex); // 1을 출력합니다

이제 다른 항목을 선택해 봅시다:

javascriptlet select = document.querySelector('#select');
select.selectedIndex = 2; // '셋'을 선택합니다