[TIL] Day 13 : select, option

select-option 태그 (다운 버튼으로 옵션 선택)

<select id="search-option">
	<option value="title">title</option>
	<option value="overview">ovierview</option>
	<option value="director">director</option>
	<option value="cast">cast</option>
</select>

기존

<form id="search-form">
	<input type="text" id="search-input" placeholder="검색어를 입력하세요" autofocus />
	<button type="submit" id="search-button">검색</button>
</form>

수정

<form id="search-form">
	<select id="search-option">
		<option value="title">title</option>
		<option value="overview">ovierview</option>
		<option value="director">director</option>
		<option value="cast">cast</option>
	</select>
	<input type="text" id="search-input" placeholder="검색어를 입력하세요" autofocus />
	<button type="submit" id="search-button">검색</button>
</form>

검색 버튼을 누르면 select에서 선택한 option의 value를 가져와서 그에 맞는 검색을 하려고 하는데 방법을 몰랐다.

어떤 option이 선택되었는지를 알 수 있는 방법은 .selectedIndex 메소드를 사용하는 것이다.

const searchOption = document.getElementById("search-option");

console.log(searchOption.selectedIndex);

이러면 나의 경우,
title를 선택하면 -> 0
overview를 선택하면 -> 1
director를 선택하면 -> 2
cast를 선택하면 -> 3
이 뜨는 것을 볼 수 있다.