드롭다운은 기본적으로 select 태그로 구현
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const select = document.querySelector('select') | |
| const p = document.querySelector('p') | |
| p.style.font = '15px arial' | |
| select.addEventListener('change', (event) => { | |
| const options = event.currentTarget.options | |
| const index = event.currentTarget.options.selectedIndex | |
| p.textContent = `선택: ${options[index].textContent}` | |
| }) | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <select> | |
| <option>떡볶이</option> | |
| <option>순대</option> | |
| <option>오뎅</option> | |
| <option>튀김</option> | |
| <option>김밥</option> | |
| </select> | |
| <p>선택: 떡볶이</p> | |
| </body> | |
| </html> |
'웹' 카테고리의 다른 글
| 웹 애플리케이션 배포 방법 (0) | 2021.08.05 |
|---|---|
| node.js PM2 모듈 (0) | 2021.03.21 |
| JavaScript 글자 입력 양식 이벤트 (0) | 2021.03.14 |
| JavaScript 이벤트 발생 객체 (0) | 2021.03.14 |
| JavaScript 이벤트 설정 (0) | 2021.03.14 |
