[jquery] 시도, 시군구 동적 구현

image source:https://images.unsplash.com/photo-1585076641399-5c06d1b3365f?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

---

시도에 따른 시군구 selectbox 동적 구현

시도, 시군구 데이터를 DB에서 가져오는게 아니라 js파일로 가져오는 경우

// sido_sigungu_data.js
// 시도
const sidoList = ["서울시", "강원도", "인천", "경기"]; 

// 시군구
const sigunguObj = {
    "서울시": ["강남구", "강동구", "강북구", "강서구"],
    "강원도": ["춘천시", "원주시", "강릉시", "동해시"],
    "인천": ["계양구", "미추홀구", "남동구", "부평구"],
    "경기": ["성남시", "수원시", "안양시", "용인시"]
};

<!-- HTML 구조 -->
<select id="sido_select">
    <option value="">시도 선택</option>
</select>

<select id="sigungu_select" disabled>
    <option value="">시군구 선택</option>
</select>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./sido_sigungu_data.js"></script> 
<script>
$(document).ready(function() {
    const $sido = $('#sido_select');
    const $sigungu = $('#sigungu_select');

    // 시도 세팅
    sidoList.forEach(sido => {
        $sido.append(`<option value="${sido}">${sido}</option>`);
    });

    // 이벤트가 발생한 시도에 따른 시군구 데이터 세팅
    $sido.on('change', function() {
        const selectedValue = $(this).val();
        
        // 기존 시군구 초기화(데이터 중복 방지)
        $sigungu.empty().append('<option value="">시군구 선택</option>');

        if (selectedValue) {
            // 선택된 시도를 키값으로하는 시군구 데이터 세팅
            const list = sigunguData[selectedValue];
            
            list.forEach(sigungu => {
                $sigungu.append(`<option value="${sigungu}">${sigungu}</option>`);
            });
            
            // 비활성화 해제 (진입 허용)
            $sigungu.prop('disabled', false);
        } else {
            $sigungu.prop('disabled', true);
        }
    });
});
</script>