JavaScript로 목록 선택 항목 변경하기

이전 강의에서는 목록에서 선택된 항목을 가져오는 방법을 배웠습니다. 이제 JavaScript를 사용하여 선택된 항목을 변경해 보겠습니다.

이를 위해 select의 value 속성에 선택하려는 option의 value 속성 값을 기록합니다.

다음과 같은 select가 있다고 가정해 보겠습니다:

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

버튼도 있다고 가정해 보겠습니다:

<input type="submit" id="button">

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

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

이제 버튼을 클릭했을 때 select의 선택이 변경되도록 만들어 보겠습니다:

button.addEventListener('click', function() {
	select.value = 'one';
});

목록에 value 속성이 없는 경우, select의 value 속성에 선택하려는 option 태그의 텍스트를 기록해야 합니다.

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