JQUERY 도시선택 시 구/군을 선택할 수 있는 script 1분 안에 따라하기

1차(시/도), 2차(구/군) 지역을 선택 하는 select box 소스 입니다.  2차 지역의 구/군은 javascript 코드에서 배열로 삽입하면 되며, 사용하는 예시 코드를 안내해 드립니다. 샘플을 활용하여 빠르게 작업물을 완성해보세요!

 

샘플보기

시/도를 선택하세요 서울특별시 부산광역시 대구광역시 인천광역시 구/군을 선택하세요

 

---

 

1. 두개의 SELECT BOX 를 준비해주세요.

<select id="province" name="province">
  <option value="">시/도를 선택하세요</option>
  <option value="서울특별시">서울특별시</option>
  <option value="부산광역시">부산광역시</option>
  <option value="대구광역시">대구광역시</option>
  <option value="인천광역시">인천광역시</option>
</select>

<select id="district" name="district">
  <option value="">구/군을 선택하세요</option>
</select>

 

 

2. JavaScript  코드 

const districts = {
  "서울특별시": ["강남구", "강동구", "강북구", "강서구"],
  "부산광역시": ["해운대구", "수영구", "남구", "동래구"],
  "대구광역시": ["달서구", "수성구", "중구", "북구"],
  "인천광역시": ["남동구", "연수구", "미추홀구", "서구"]
};

$(document).ready(function () {
  // 시/도 선택 시 이벤트 처리
  $("#province").on("change", function () {
    const selectedProvince = $(this).val(); // 선택된 시/도 값
    const $district = $("#district"); // 구/군 selectbox

    // 구/군 초기화
    $district.empty().append('<option value="">구/군을 선택하세요</option>');

    // 선택된 시/도에 해당하는 구/군 추가
    if (selectedProvince && districts[selectedProvince]) {
      districts[selectedProvince].forEach(function (district) {
        $district.append(`<option value="${district}">${district}</option>`);
      });
    }
  });
});

시/도를 선택하지 않게되면 값은 구/군으로 초기화되며, 해당 지역에 따라 2차지역(구/군)을 선택하는 selectbox의 option값들이 리스트업됩니다.