[책] 자바스크립트 코드 레시피 278 - 153일차

드롭다운 메뉴 값 변경 확인하기

• 드롭다운 메뉴 상태 변경 시점에 작업을 처리하고 싶을 때

구문

change select 요소 변경 시 이벤트

설명

select 박스 요소의 상태 변경은 change 이벤트로 감시할 수 있습니다. addEventListener()를 사용해 이벤트 핸들러를 설정합니다. 이벤트 핸들러 내부 함수는 앞서 기술한 드롭다운 메뉴 값 읽어 오기 방법을 사용합니다.

실습

index.html

<select id="mySelect">
  <option value="apple">apple</option>
  <option value="orange">orange</option>
  <option value="grape" selected>grape</option>
</select>
<p class="log"></p>

---

script.js

const element = document.querySelector('#mySelect');
element.addEventListener('change', handleChange);
function handleChange() {
  const value = element.value;
  const log = `선택된 값은 ${value} 입니다.`;
  document.querySelector('.log').innerHTML = log;
  console.log(document.querySelector('.log').innerHTML, value);
}