記事の詳細

今回は住所選択用のセレクトボックスをそこそこ簡単に作る方法をご紹介します。
住所を入力するフォーム画面を作成する際には役立つかもしれません!

今回の記事を読むと下記のようなフォームが作成できます。

県名  :

市区町村:

町域  :



※「市区町村」は県名入力後にリストが表示されて、「町域」は市区町村入力後に表示されます。
※選択後に読み込みの時間があるので、表示が遅れる場合があります。

「住所.jp」様から住所データのCSVファイルをダウンロードする

元となる住所データは「住所.jp」様のサイトからダウンロードします。

ダウンロードはこちらから!

今回の例では「東京」と「神奈川」のデータをダウンロードします。
住所ファイルダウンロード

ダウンロードしたファイルを解凍すると、下記のファイルが格納されています。
・13tokyo.csv
・14kanaga.csv

上記のファイルを自身の管理しているサーバーに格納します。

※WordPressで上記ファイルを利用する場合は、ファイルの文字コードを”UTF-8″に変更してください。

これで必要なファイルの準備はOKです。

HTMLコードを記述してJavaScriptを仕込む

本サンプルでは下記のようなコードを設置します。

・HTMLコード

・JavaScript

set_menu_address_item関数で住所リストの切り替えを行っています。
selectbox_check関数はフォームで活用する事を想定して、フォーム送信の際のチェックとして追加してみました。

住所リストの表示にはファイルを読み込んでいるので、やや表示が遅れるタイミングがあります。
リスト選択後に軽いロード画面を挟むようにすると、ユーザーが迷わずに入力できそうですね。

今回は東京と神奈川だけのプログラムを作成しましたが、他の都道府県も同じようにファイルをダウンロードしてHTMLコードにちょっと追記するだけで対応はできると思います。

ただし、「住所.jp」様のサイトで提供されている「全国」のデータを使う場合は、ロードが長くてユーザーのストレスになってしまうことが考えられますので注意が必要です。

ではまた!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

Webサイト制作の際に活用するJavaScript、PHP等のプログラム関係を担当しています。過去にはC、C++、C#等を活用したソフトウェア開発も行っていました。小難しい記事を書くことが多いのですが、本人はそこまで小難しい性格……じゃなければ良いなぁと思ってます!

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AD

ページ上部へ戻る