기본 콘텐츠로 건너뛰기

라벨이 HTML/CSS/JS인 게시물 표시

JavaScript로 시/도 · 시/군/구 2단 콤보박스 구현하기 (대한민국 행정구역 전체 데이터)

JavaScript로 시/도 · 시/군/구 2단 콤보박스 구현하기 (대한민국 행정구역 전체 데이터) JavaScript로 시/도 · 시/군/구 2단 콤보박스 구현하기 (대한민국 행정구역 전체 데이터) 회원가입 폼이나 쇼핑몰 배송지 입력 화면을 만들다 보면, 시/도 선택 후 자동으로 시/군/구가 바뀌는 2단 콤보박스 는 거의 필수 기능입니다. 이 글에서는 대한민국 행정구역(시/도, 시/군/구) 전체 데이터를 JavaScript 객체로 정의하고, 이 데이터를 활용해 바닐라 JavaScript만으로 2단 주소 콤보박스 를 구현하는 방법을 정리합니다. 1. 시/도 · 시/군/구 2단 콤보박스 동작 예제 먼저 결과물이 어떻게 동작하는지 간단한 데모를 보겠습니다. 주소 선택 예제 시/도 선택 시/군/구 선택 실제 서비스에서는 이 콤보박스를 회원가입, 마이페이지 주소 관리, 주문/배송지 입력 등에 그대로 붙여서 사용할 수 있습니다. 2. 대한민국 행정구역 JavaScript 데이터 구조 기본 구조는 매우 단순합니다. 시/도 이름을 객체의 Key 로, 해당 시/도 아래의 시/군/구 목록을 배열 로 가지는 형태입니다. const sigunguData = { ...