[JavaScript] 자바스크립트 풀다운(Pull-down) 메뉴 사용하기
2022. 7. 16. 02:52ㆍProgram/JavaScript
171_자바스크립트 풀다운(Pull-down) 메뉴 사용하기
[적용]
- 시도별 행정 규역 입력 폼을 만들고 싶을 때
- 풀다운 메뉴를 동적으로 처리하고 싶을 때
[내용]
지역마다 부여된 행정 표준 코드의 일부를 가져와 풀다운 입력 폼을 만들어 보자.
스크립트로 select 요소 내 option 요소를 동적으로 생성한다.
HTML index.html
<body>
<select id="pref"></select>
<p class="log"></p>
</body>JavaScript main.js
// 행정 표준 코드에 따른 지역별 코드 배열
const PREF_LIST = [
{ value: 1, name: '서울' },
{ value: 2, name: '세종' },
{ value: 3, name: '부산' },
{ value: 4, name: '대구' },
{ value: 5, name: '인천' },
{ value: 6, name: '광주' },
{ value: 7, name: '대전' },
{ value: 8, name: '울산' },
{ value: 9, name: '제주' },
{ value: 10, name: '서귀포' },
{ value: 11, name: '수원' },
{ value: 12, name: '고양' },
{ value: 13, name: '성남' },
{ value: 14, name: '용인' },
{ value: 15, name: '부천' },
{ value: 16, name: '안산' },
{ value: 17, name: '평택' },
{ value: 18, name: '의정부' },
{ value: 19, name: '김포' },
{ value: 20, name: '광명' },
{ value: 21, name: '하남' },
{ value: 22, name: '과천' },
{ value: 23, name: '춘천' },
{ value: 24, name: '원주' },
{ value: 25, name: '강릉' },
{ value: 26, name: '속초' },
{ value: 27, name: '충주' },
{ value: 28, name: '아산' },
{ value: 29, name: '전주' },
{ value: 30, name: '군산' }
];
// select 요소 참조
const selectElement = document.querySelector('#pref');
// option 요소 초기 표시 작성
let optionString = '<option value="">선택하세요</option>';
// option 요소를 배열에서 가져오기
PREF_LIST.forEach((item) => {
// 시도별 value와 name반영
optionString +=
`<option value="${item.value}">${item.name}</option>`;
});
// option 요소를 select 요소에 추가
selectElement.innerHTML = optionString;
// 변경 시 이벤트
selectElement.addEventListener('change', (event) => {
// 현재 값 가져오기
const value = event.target.value;
// 메시지 작성
const message =
value === '' ? '지역이 선택되지 않았습니다.' : `선택된 지역은 ${value} 입니다.`;
// 화면에 표시
document.querySelector('.log').innerHTML = message;
});* 메시지 작성에서 사용한 삼항 연산자는 '진리값 ? 값1 : 값2'의 방식으로 기술하며,
진리값이 true 인 경우 값1, false인 경우 값2를 반환한다.
실행결과
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트에서 CSS 트랜지션(Transitions), 애니메이션(Animations)사용하기 (0) | 2022.07.16 |
|---|---|
| [JavaScript] 자바스크립트 폼 전송하기 (0) | 2022.07.16 |
| [JavaScript] 자바스크립트에서 색상 선택 정보변경 확인하기 (0) | 2022.07.15 |
| [JavaScript] 자바스크립트에서 색상 선택 정보 읽어오기 (0) | 2022.07.15 |
| [JavaScript] 자바스크립트에서 슬라이더 값 변경 확인하기 (0) | 2022.07.15 |