JavaScript 드롭다운 목록에서 선택한 옵션의 값 가져오는 방법

HTML 드롭다운에서 현재 선택 항목을 가져오려면 select 요소의 value 속성을 읽으세요. 사용자가 다른 옵션을 선택할 때 페이지가 반응해야 한다면 change 이벤트 리스너를 추가하세요. 이 이벤트는 키보드 선택과 포인터 선택 모두에서 동작합니다.

JavaScript에서 드롭다운의 선택된 옵션 값 가져오기

출력 요소를 드롭다운 옆에 배치하고, 다음 마크업 뒤에 스크립트를 불러오세요: <label for="plan">Plan</label> <select id="plan"><option value="starter">Starter plan</option><option value="pro" selected>Pro plan</option></select> <output id="chosen-plan"></output>. 각 옵션에는 기계가 읽을 수 있는 값과 사람이 읽을 수 있는 레이블이 있습니다. selected 속성 덕분에 pro가 초기 선택이 되어, 사용자가 아무것도 바꾸기 전에 페이지에 표시할 수 있습니다.

JavaScript는 두 요소를 ID로 찾습니다. 선택 변경을 감지하고 현재 값을 출력에 복사하며, 초기 선택을 표시하기 위해 같은 함수를 한 번 호출합니다:

const planSelect = typeof document === "undefined"
  ? {
      value: "pro",
      addEventListener(eventName, handler) {
        this.changeHandler = handler;
      }
    }
  : document.querySelector("#plan");
const chosenPlan = typeof document === "undefined"
  ? { textContent: "" }
  : document.querySelector("#chosen-plan");

function showChosenPlan() {
  chosenPlan.textContent = planSelect.value;
  console.log(chosenPlan.textContent);
}

planSelect.addEventListener("change", showChosenPlan);
showChosenPlan();

pro

브라우저에서 document.querySelector("#plan")은 select 요소를 찾고, document.querySelector("#chosen-plan")은 출력 요소를 찾습니다. 대체 객체는 브라우저 문서가 없는 곳에서 예제를 실행할 때 사용되며, 제공된 예제 실행에 대해 동일한 초기 pro 값을 제공합니다. 출력에는 표시 레이블인 Pro plan이 아니라 선택한 옵션의 값인 pro가 표시됩니다.

change 리스너는 사용자가 포인터를 사용하든 키보드를 사용하든 다른 옵션을 선택한 후에 실행됩니다. 리스너를 등록하는 것만으로는 change 이벤트가 발생하지 않으므로 showChosenPlan()의 초기 호출은 별도로 이루어집니다. 사용자가 Starter plan을 선택하면 출력은 starter가 됩니다. 즉, 표시되는 값은 고정된 순서를 따르는 것이 아니라 현재 선택에 따라 달라집니다.

현재 선택이 한 번만 필요할 때는 planSelect.value를 직접 사용하세요. 값 대신 표시 레이블이 필요하면 planSelect.selectedOptions[0].textContent를 읽으세요. select 요소의 value는 문자열입니다. 코드에 숫자가 필요하면 Number(planSelect.value)처럼 명시적으로 변환하세요.

마크업의 ID와 스크립트의 선택자를 일치시켜 유지하세요. 선택자가 해당 요소가 존재하기 전에 실행되면 querySelector는 null을 반환합니다. 스크립트를 마크업 뒤에 배치하거나 문서가 로드될 때까지 기다리세요. 나중에 옵션이 추가되더라도, 사용자가 선택을 변경하면 리스너는 select 요소에서 선택된 값을 읽을 수 있습니다.