JavaScript로 드롭다운 선택 값 가져오는 방법 완벽 정리

웹 폼을 개발하다 보면 가장 자주 마주치는 작업 중 하나가 바로 드롭다운(선택 목록)에서 사용자가 선택한 값을 가져오는 것입니다. 이 글에서는 JavaScript를 활용해 드롭다운의 값을 손쉽게 읽어오고, 변경 이벤트에 반응하는 방법까지 단계별로 알아보겠습니다.

드롭다운 HTML 요소 만들기

먼저 HTML로 드롭다운을 만드는 방법을 간단히 복습해 보겠습니다. 드롭다운은 <select> 태그로 생성하고, 그 안에 <option> 태그들을 중첩하여 선택 항목을 정의합니다. select 요소가 드롭다운 상자 역할을 하며, option 태그가 실제 드롭다운에 표시될 항목들이 됩니다.

이모지가 포함된 좋아하는 과일 목록으로 드롭다운을 만들어 보겠습니다.

<select name="fruits" id="fruits">
  <option value="">--select--</option>
  <option value="avocado">Avocado🥑</option>
  <option value="watermelon">Watermelon🍉</option>
  <option value="kiwi">Kiwi🥝</option>
  <option value="tomato">Tomato🍅</option>
</select>
<h2 id="pick"></h2>

나중에 JavaScript로 내용을 채워 넣을 빈 h2 요소도 함께 추가했습니다. 이 시점에 브라우저에서 확인하면 다음과 같이 원하는 과일을 선택할 수 있습니다.

여기서 value 속성의 중요성에 주목하세요. value 속성은 스타일링되지 않은 순수 데이터를 제공하기 때문에 JavaScript로 다루기 매우 편리합니다. 반면 option 태그 안의 텍스트는 어떤 내용이든 자유롭게 들어갈 수 있어 신뢰하기 어렵습니다. 따라서 프로그래밍적으로 값을 다룰 때는 반드시 value 속성을 기준으로 삼아야 합니다.

JavaScript로 드롭다운 값 선택하고 표시하기

먼저 getElementById 메서드를 사용해 select 태그로 드롭다운 요소를 선택합니다.

const element = document.getElementById("fruits");

드롭다운을 선택했다면, 현재 선택된 옵션의 값을 가져올 수 있습니다. 아무것도 선택하지 않았을 때의 기본값은 첫 번째 옵션입니다. 직접 확인해 보겠습니다.

const checkValue = element.options[element.selectedIndex].value;
const checkText = element.options[element.selectedIndex].text;

여기서는 요소의 options 배열 속성에 접근한 뒤, 현재 선택된 옵션의 인덱스(selectedIndex)를 이용해 해당 옵션의 value 또는 text를 읽어옵니다.

두 변수를 console.log로 출력해 보면 어떻게 될까요? 아무것도 출력되지 않습니다. 그 이유는 첫 번째 옵션의 value가 비어 있기 때문입니다(단순 플레이스홀더 역할). 첫 번째 option 태그를 주석 처리하고 다시 실행하면 value와 text가 모두 정상적으로 출력되는 것을 확인할 수 있습니다.

JavaScript로 드롭다운 변경 감지하기

JavaScript는 페이지의 변화에 반응하도록 설계되었으므로, 드롭다운 역시 동적으로 동작하게 만들어야 합니다. 이를 위해 과일 드롭다운 요소에 eventListener(이벤트 리스너)를 등록하겠습니다.

element.addEventListener("change", (e) => {
  const value = e.target.value;
  const text = element.options[element.selectedIndex].text;
 
  if (value) {
    document.getElementById("pick").textContent = `Value Selected: ${value}`;
  } else {
    document.getElementById("pick").textContent = "";
  }
});

eventListener를 통해 드롭다운의 change 이벤트를 지속적으로 감지합니다. e.target.value처럼 이벤트 객체에서 곧바로 선택된 값을 가져올 수도 있다는 점에 유의하세요. 폼 관련 튜토리얼에서 자주 접했을 패턴입니다.

이제 완성입니다! 아무 과일이나 선택하면 JavaScript가 드롭다운의 변화에 즉시 반응하고, h2 요소의 내용도 그에 맞게 자동으로 업데이트됩니다.

마무리

드롭다운 값을 가져오는 것은 웹 개발을 배우는 과정에서 반드시 익혀야 할 핵심 스킬입니다. 데이터베이스를 업데이트하거나, 사용자에게 선택 결과를 보여주거나, DOM 변화에 '반응'해야 하는 다양한 상황에서 이 값들이 중요하게 활용됩니다. JavaScript를 활용하면 이러한 값을 아주 간단하고 빠르게 얻을 수 있습니다.