[JavaScript] 자바스크립트에서 드롭다운(Drop-down) 메뉴값 읽어오기

165_자바스크립트에서 드롭다운(Drop-down) 메뉴값 읽어오기

[적용]

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

---

[문법]

속성	의미	타입
select요소.value	선택된 항목의 값	문자열

---

[내용]

select 요소와 option 요소를 사용해 드롭다운 메뉴를 생성한다.

드롭다운 메뉴의 선택된 항목을 확인하기 위해서는 select 요소에 id 값을 할당하고

자바스크립트로 요소의 value 값을 확인한다.

 

HTML                                                                                                                                                              index.html

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

JavaScript                                                                                                                                                          main.js

// select 요소 참조
const element = document.querySelect('#mySelect');

// 값 가져오기
const value = element.value;

// 상태를 화면에 표시
const log = `선택된 값은 ${value} 입니다.`;
document.querySelector('.log').innerHTML = log;

 

value 속성에 값을 대입하여 select 요소를 변경할 수 있으며,

option 으로 정의된 값 중의 하나를 대입한다.

const element = document.querySelector('#mySelect');
element.value = 'apple';

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김