JavaScript에서 드롭다운 목록 작업하기

본 강의에서는 드롭다운 목록을 나타내는 태그 select를 사용하는 방법을 공부하겠습니다. HTML에서 이 태그를 사용하는 방법을 모르신다면, 먼저 다음 링크의 참고서에서 구조를 공부하세요: select.

이제 JavaScript를 통해 이 태그를 어떻게 작업하는지 살펴보겠습니다. 다음과 같은 드롭다운 목록이 주어졌다고 가정하겠습니다:

<select id="select">
	<option>one</option>
	<option selected>two</option>
	<option>three</option>
</select>

변수에 select에 대한 참조를 가져옵니다:

let select = document.querySelector('#select');

이제 select가 변경될 때 목록에서 선택한 항목의 텍스트를 화면에 출력해 보겠습니다. 이를 위해서는 select의 value 속성을 읽어야 합니다:

select.addEventListener('change', function(){
	console.log(this.value);
});

select, 단락 및 버튼이 주어집니다. 버튼을 클릭하면 선택된 목록 항목의 텍스트를 단락에 출력하세요.

2020년부터 2030년까지의 연도 드롭다운 목록을 만드세요. 목록에서 어떤 항목을 선택하면 해당 연도가 윤년인지 아닌지를 알리는 메시지를 출력하세요.