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

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

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

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

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

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

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

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

인풋과 셀렉트가 주어졌습니다. 인풋에 어떤 숫자가 입력됩니다. 포커스를 잃을 때, 인풋의 값과 동일한 번호를 가진 목록 항목을 선택 상태로 만드세요.

요일 이름이 있는 드롭다운 목록을 만드세요. JavaScript가 이 목록에서 기본적으로 현재 요일을 선택하도록 하세요.