자바스크립트를 이용한 시도, 시군구, 읍면동 주소 셀렉트 박스

워드프레스 Quform 플러그인에 시도/시군구/읍면동 셀렉트 박스를 추가하는 방법에 대한 문의가 있어서 공개된 자바스크립트 소스들을 테스트해 보았습니다. 여러 가지 스크립트 중에서 티스토리 블로그의 "jQuery 셀렉트박스 제어 예제 select box control example" 글에 소개된 스크립트가 잘 작동했습니다. jQuery를 사용하여 구현되었는데요, 저는 자바스크립트로 변환하여 응용해 보았습니다.

※ 원 출처가 잘못되었다고 올바른 출처로 바꾸어 달라는 요청이 있어서 출처를 변경했습니다.

자바스크립트를 이용한 시도, 시군구, 읍면동 주소 셀렉트 박스

Quform, Contact Form 7, WPForms, Ninja Forms 등의 워드프레스 컨택트 폼에 시도군 셀렉트 박스를 추가하려는 경우, 위의 그림과 같이 시도, 시군구, 읍면동 select 박스를 표시하고, 사용자가 시도군을 선택하면 별도의 필드(예: 전체 주소)에 값이 자동 입력되도록 하여 수신하는 것을 고려할 수 있을 것입니다.

위의 그림에서는 제대로 작동하는지를 체크하기 위해 "전체주소" 필드를 표시했지만, 문의폼에서는 시군구 선택 항목들을 취합하여 값을 받는 필드는 숨김(hidden) 필드로 만드시면 됩니다.

Quform 플러그인에서는 Hidden 필드가 지원되지만, 히든 필드가 지원되지 않는 컨택트 폼 플러그인에서는 CSS로 간단히 숨길 수 있습니다(display:none;).

"쪼렙이 만렙될때까지" 님의 블로그에서 소개한 방법을 적용하려는 경우:

1.컨택트 폼이 삽입된 페이지에 푸터 영역에 JS 파일을 로드하는 코드를 추가합니다.

<script src="https://zelkun.tistory.com/attachment/cfile8.uf@99BB7A3D5D45C065343307.js"></script>

js 파일을 다운로드하여 FTP에 업로드하여 로드하셔도 됩니다.

2. 시도군 셀렉트 박스 HTML 코드를 HTML 요소로 컨택트 폼 내에 추가합니다.

    <select id="sido">
      <option value="">시도 선택</option>
    </select>
    <select id="sigugun">
      <option value="">시군구 선택</option>
    </select>
    <select id="dong">
      <option value="">읍면동 선택</option>
    </select>

3. jQuery 코드를 추가합니다. Quform의 경우 Forms » Settings » Custom CSS & JS » Custom JavaScript 섹션에 추가할 수 있습니다. 자바스트립트를 선호하는 경우 다음 코드를 시도해볼 수 있습니다. 제가 나름대로 변환해 보았는데, 제대로 된 코드인지는 모르겠습니다.

document.addEventListener("DOMContentLoaded", function () {
  // sido option 추가
  hangjungdong.sido.forEach(function (code) {
    document.querySelector("#sido").appendChild(fn_option(code.sido, code.codeNm));
  });

  // sido 변경시 시군구 option 추가
  document.querySelector("#sido").addEventListener("change", function () {
    var sigugun = document.querySelector("#sigugun");
    sigugun.style.display = "block";
    sigugun.innerHTML = "";
    sigugun.appendChild(fn_option("", "선택"));

    hangjungdong.sigugun.forEach(function (code) {
      if (document.querySelector("#sido").value == code.sido) {
        sigugun.appendChild(fn_option(code.sigugun, code.codeNm));
      }
    });

    if (document.querySelector("#sido").value == "36") {
      sigugun.style.display = "none";
      sigugun.querySelector("option:nth-child(2)").selected = true;
      sigugun.dispatchEvent(new Event("change"));
    }
  });

  // 시군구 변경시 행정동 옵션추가
  document.querySelector("#sigugun").addEventListener("change", function () {
    var dong = document.querySelector("#dong");
    dong.innerHTML = "";

    hangjungdong.dong.forEach(function (code) {
      if (
        document.querySelector("#sido").value == code.sido &&
        document.querySelector("#sigugun").value == code.sigugun
      ) {
        dong.appendChild(fn_option(code.dong, code.codeNm));
      }
    });

    dong.insertBefore(fn_option("", "선택"), dong.firstChild);
    dong.querySelector("option[value='']").selected = true;
  });

  document.querySelector("#dong").addEventListener("change", function () {
    var sido = document.querySelector("#sido").value;
    var sigugun = document.querySelector("#sigugun").value;
    var dong = document.querySelector("#dong").value;
    var dongCode = sido + sigugun + dong + "00";
  });
});

function fn_option(code, name) {
  var option = document.createElement("option");
  option.value = code;
  option.text = name;
  return option;
}

4.사용자가 시군구 드롭박스 메뉴를 선택하고 상세 주소를 입력하면 전체 주소 필드에 값이 추가되도록 자바스크립트를 만들도록 합니다.

기본적으로 다음과 같은 자스 스크립트를 응용할 수 있습니다.

document.addEventListener('DOMContentLoaded', function() {
    var sidoSelect = document.getElementById('sido');
    var sidoInputField = document.querySelector('input[name="quform_1_23"]');

    sidoSelect.addEventListener('change', function() {
         sidoInputField.value = sidoSelect.value;
    });
});

마치며

컨택트 폼에서 다음 우편주소를 통합하여 주소 검색을 통해 주소를 입력하도록 할 수 있습니다. 다른 방법으로 시군구 주소를 선택하여 주소를 입력하도록 하고 싶은 경우 이 글에 소개된 방법을 응용할 수 있습니다. 구글링하면 다른 방법도 제시되어 있으므로 시도해볼 수 있을 것입니다.

자바스크립트를 이용한 시도, 시군구, 읍면동 주소 셀렉트 박스

마치며

참고

7 개 댓글

Leave a Comment 응답 취소