팁과노하우

2025.03.03 02:20

광역시/도, 시/군/구 셀렉트로 만들기

붙혀넣으면 바로 써먹을 수 있습니다. :D


442068869f589209c3ca4410568faf69_1740935992_9594.png
 



                <?php
                    /* 게시판에서 사용하는 경우 이걸로 변경 (수정시 selected 처리를 위함)
                    $selected_sido = isset($write['wr_1']) ? $write['wr_1'] : '';
                    $selected_sigungu = isset($write['wr_2']) ? $write['wr_2'] : '';
                    */
                    $selected_sido = isset($member['mb_1']) ? $member['mb_1'] : '';
                    $selected_sigungu = isset($member['mb_2']) ? $member['mb_2'] : '';
                ?>
                <span>지역</span>
                <div>
                    <!-- 게시판이라면 mb_1 > wr_1 -->
                    <select id="sido" name="mb_1" class="select w40" required>
                        <option value="">광역시/도</option>
                    </select>
                    <!-- 게시판이라면 mb_2 > wr_2 -->
                    <select id="sigungu" name="mb_2" class="select w30">
                        <option value="">시/군/구</option>
                    </select>


                </div>
                
                <script>
                const regionData = {
                    
                        "서울특별시": ["종로구", "중구", "용산구", "성동구", "광진구", "동대문구", "중랑구", "성북구", "강북구", "도봉구", "노원구", "은평구", "서대문구", "마포구", "양천구", "강서구", "구로구", "금천구", "영등포구", "동작구", "관악구", "서초구", "강남구", "송파구", "강동구"],
                        "부산광역시": ["중구", "서구", "동구", "영도구", "부산진구", "동래구", "남구", "북구", "강서구", "해운대구", "사하구", "금정구", "연제구", "수영구", "사상구", "기장군"],
                        "인천광역시": ["중구", "동구", "미추홀구", "연수구", "남동구", "부평구", "계양구", "서구", "강화군", "옹진군"],
                        "대구광역시": ["중구", "동구", "서구", "남구", "북구", "수성구", "달서구", "달성군", "군위군"],
                        "광주광역시": ["동구", "서구", "남구", "북구", "광산구"],
                        "대전광역시": ["동구", "중구", "서구", "유성구", "대덕구"],
                        "울산광역시": ["중구", "남구", "동구", "북구", "울주군"],
                        "세종특별자치시": [],
                        "경기도": ["가평군", "고양시", "과천시", "광명시", "광주시", "구리시", "군포시", "김포시", "남양주시", "동두천시", "부천시", "성남시", "수원시", "시흥시", "안산시", "안성시", "안양시", "양주시", "양평군", "여주시", "연천군", "오산시", "용인시", "의왕시", "의정부시", "이천시", "파주시", "평택시", "포천시", "하남시", "화성시"],
                        "강원특별자치도": ["원주시", "춘천시", "강릉시", "동해시", "속초시", "삼척시", "홍천군", "태백시", "철원군", "횡성군", "평창군", "영월군", "정선군", "인제군", "고성군", "양양군", "화천군", "양구군"],
                        "충청북도": ["청주시", "충주시", "제천시", "보은군", "옥천군", "영동군", "증평군", "진천군", "괴산군", "음성군", "단양군"],
                        "충청남도": ["천안시", "공주시", "보령시", "아산시", "서산시", "논산시", "계룡시", "당진시", "금산군", "부여군", "서천군", "청양군", "홍성군", "예산군", "태안군"],
                        "경상북도": ["포항시", "경주시", "김천시", "안동시", "구미시", "영주시", "영천시", "상주시", "문경시", "경산시", "의성군", "청송군", "영양군", "영덕군", "청도군", "고령군", "성주군", "칠곡군", "예천군", "봉화군", "울진군", "울릉군"],
                        "경상남도": ["창원시", "김해시", "진주시", "양산시", "거제시", "통영시", "사천시", "밀양시", "함안군", "거창군", "창녕군", "고성군", "하동군", "합천군", "남해군", "함양군", "산청군", "의령군"],
                        "전북특별자치도": ["전주시", "익산시", "군산시", "정읍시", "완주군", "김제시", "남원시", "고창군", "부안군", "임실군", "순창군", "진안군", "장수군", "무주군"],
                        "전라남도": ["여수시", "순천시", "목포시", "광양시", "나주시", "무안군", "해남군", "고흥군", "화순군", "영암군", "영광군", "완도군", "담양군", "장성군", "보성군", "신안군", "장흥군", "강진군", "함평군", "진도군", "곡성군", "구례군"],
                        "제주특별자치도": ["제주시", "서귀포시"]
                      
                };


                const sidoSelect = document.getElementById("sido");
                const sigunguSelect = document.getElementById("sigungu");


                function populateSido() {
                    for (let sido in regionData) {
                        let option = new Option(sido, sido);
                        if (sido === "<?php echo $selected_sido; ?>") {
                            option.selected = true;
                        }
                        sidoSelect.add(option);
                    }
                    updateSigungu();
                }


                function updateSigungu() {
                    sigunguSelect.innerHTML = '<option value="">선택</option>';


                    let selectedSido = sidoSelect.value;
                    if (selectedSido && regionData[selectedSido]) {
                        regionData[selectedSido].forEach(sigungu => {
                            let option = new Option(sigungu, sigungu);
                            if (sigungu === "<?php echo $selected_sigungu; ?>") {
                                option.selected = true;
                            }
                            sigunguSelect.add(option);
                        });
                    }
                }


                sidoSelect.addEventListener("change", updateSigungu);


                populateSido();
            </script>

  • 공유링크 복사
    미니홈 쪽지 구독하기
    구독하고 알림받기

    댓글목록

    profile_image
    no_profile 에스엘미디어미니홈 1:1 대화하기  오래 전

    1빠~
     감사합니다.

    2025-03-03 02:39

    profile_image
    no_profile 우루사100mg미니홈 1:1 대화하기  오래 전

    이걸 어떻게 활용해봐야 할까.. 감사합니다.^^

    2025-03-03 07:45

    profile_image
    no_profile rainbow미니홈 1:1 대화하기  오래 전

    감사합니다.^^
    활용하면 다중으로 셀렉트하는 것도 가능하겠군요.

    2025-03-03 08:06

    profile_image
    April미니홈 1:1 대화하기  오래 전

    좋은 팁
    감사합니다

    2025-03-03 12:38

    profile_image
    no_profile 민트다이어리미니홈 1:1 대화하기  오래 전

    감사합니다 ^^

    2025-03-03 17:08

    profile_image
    no_profile 재아미니홈 1:1 대화하기  오래 전

    좋네요!!

    2025-03-03 18:25