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

풀다운pull-down 메뉴 사용하기

• 시도별 행정 구역 입력 폼을 만들고 싶을 때
• 풀다운 메뉴를 동적으로 처리하고 싶을 때

설명

지역마다 부여된 행정 표준 코드의 일부를 가져와 풀다운 입력 폼을 만들어 봅니다. 스크립트로 select 요소 내 option 요소를 동적으로 생성합니다.

실습

index.html

<select id="pref"></select>
<p class="log"></p>

---

script.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: '제주', },
];
const selectElement = document.querySelector('#pref');
let optionString = '<option value="">선택하세요</option>';
PREF_LIST.forEach((item) => {
  optionString = optionString + `<option value="${item.value}">${item.name}</option>`;
});
selectElement.innerHTML = optionString;
selectElement.addEventListener('change', (event) => {
  const value = event.target.value;
  const message = value === '' ? '지역이 선택되지 않았습니다.' : `선택된 지역은 ${value} 입니다.`;
  document.querySelector('.log').innerText = message;
});