JavaScriptを使った試み、市郡区、邑面洞住所セレクトボックス

WordPress Quformプラグイン試行/市郡区/邑面洞セレクトボックスを追加する方法についての質問があり、公開されたJavaScriptソースをテストしました。 いろいろなスクリプトの中で、ティーストーリーブログの「jQuery セレクトボックス制御の例 select box control example記事で紹介したスクリプトはうまくいきました。jQueryを使って実装しましたが、私はJavaScriptに変換してアプリケーションを試しました。

※元のソースが間違っていると正しいソースに変えてほしいという要請があり、ソースを変更しました。

JavaScriptを使った試み、市郡区、邑面洞住所セレクトボックス

Quform, お問い合わせフォーム7、WPForms、 忍者フォーム などの WordPress コンタクトフォームに試行グループセレクトボックスを追加する場合は、上の図のように試行、市軍区、邑面洞選択ボックスを表示し、ユーザーが試行グループを選択すると別のフィールド（たとえば、住所全体）に値が自動的に入力されるようにします。で受信することを検討することができます。

上の図では、正常に機能しているかどうかを確認するために「フルアドレス」フィールドを表示していますが、お問い合わせフォームでは、市軍区選択項目をまとめて値を受け取るフィールドを隠しフィールドにするだけです。

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の場合 フォーム » 設定 » Custom CSS & JS » Custom JavaScript セクションに追加できます。 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.ユーザーが市軍区のドロップボックスメニューを選択して詳細な住所を入力したら、[住所]フィールド全体に値が追加されるようにJavaScriptを作成します。

デフォルトでは、次のJavaScriptを適用できます。

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;
    });
});

最後に、

コンタクトフォームから 次の郵便番号を統合して、住所検索で住所を入力することができます。 別の方法で市軍区の住所を選択して住所を入力したい場合は、この記事で紹介した方法を適用できます。 Googleでは他の方法も提示されているので、試してみることができます。

参照

• エレメントの問い合わせフォームウィジェット（Form要素）
• WordPress Quformお問い合わせフォームデータをカスタムDBテーブルに保存する
• WordPress Diviテーマポケレストランレイアウトパック無料ダウンロード