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

드롭다운(drop-down) 메뉴 값 읽어 오기

• 드롭다운 메뉴의 선택된 항목을 확인하고 싶을 때

구문

select요소.value 선택된 항목의 값

설명

select 요소와 option 요소를 사용해 드롭다운 메뉴를 생성합니다. 드롭다운 메뉴의 선택된 항목을 확인하기 위해서는 select 요소에 id 값을 할당하고 자바스크립트로 요소의 value 값을 확인합니다.

실습

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');
const value = element.value;
const log = `선택된 값은 ${value} 입니다.`;
document.querySelector('.log').innerHTML = log;