JavaScript로 select 요소의 값을 프로그래밍 방식으로 설정하는 방법

웹 개발을 하다 보면 선택 상자(select box)의 값을 JavaScript 코드로 직접 변경해야 하는 경우가 자주 있습니다. 예를 들어 폼을 초기화하거나, 사용자의 이전 선택을 복원하거나, 다른 입력값에 따라 특정 옵션을 자동으로 선택해야 할 때가 그렇습니다.

기본 선택 상자 예제

먼저 다음과 같은 select 요소가 있다고 가정해 보겠습니다.

<select id="my-select">
   <option value="1">Select</option>
   <option value="2">Apple</option>
   <option value="3">Strawberry</option>
   <option value="4">Cherry</option>
   <option value="5">Guava</option>
</select>

querySelector로 값 설정하기

select 요소의 값을 설정하는 가장 일반적인 방법은 document.querySelector()를 사용해 해당 요소에 접근한 뒤, value 속성에 원하는 값을 할당하는 것입니다. 이때 할당하는 값은 option 태그의 value 속성과 일치해야 합니다.

// id가 'my-select'인 선택 상자를 찾습니다
const mySelectBox = document.querySelector('#my-select');

// 값을 3(즉, Strawberry)으로 설정합니다
mySelectBox.value = 3;

위 코드가 실행되면 선택 상자에서 Strawberry 항목이 자동으로 선택됩니다. 문자열 형태로 값을 지정할 수도 있습니다.

mySelectBox.value = '3'; // 동일하게 Strawberry가 선택됨

다른 접근 방법들

querySelector() 외에도 getElementById()를 사용할 수 있으며, 성능 면에서도 유리합니다.

const mySelectBox = document.getElementById('my-select');
mySelectBox.value = '3';

또한 selectedIndex 속성을 사용하면 옵션의 순번(index)을 기준으로 직접 선택할 수도 있습니다. 인덱스는 0부터 시작합니다.

// 세 번째 옵션(Strawberry)을 인덱스로 선택
mySelectBox.selectedIndex = 2;

주의 사항

• value에 할당한 값이 존재하지 않는 option의 value라면, 선택 상자는 아무것도 선택되지 않은 상태가 됩니다.
• 값이 변경된 후 후속 처리가 필요하다면 change 이벤트를 수동으로 발생시켜야 할 수 있습니다(dispatchEvent(new Event('change'))).

이처럼 JavaScript를 활용하면 선택 상자의 값을 간단하고 유연하게 제어할 수 있습니다.