記事の詳細
「県名」「市区町村名」「町域」の住所選択用セレクトボックスをそこそこ簡単に作る方法
今回は住所選択用のセレクトボックスをそこそこ簡単に作る方法をご紹介します。
住所を入力するフォーム画面を作成する際には役立つかもしれません!
今回の記事を読むと下記のようなフォームが作成できます。
※「市区町村」は県名入力後にリストが表示されて、「町域」は市区町村入力後に表示されます。
※選択後に読み込みの時間があるので、表示が遅れる場合があります。
今回のブログの見出しはコチラです!
「住所.jp」様から住所データのCSVファイルをダウンロードする
元となる住所データは「住所.jp」様のサイトからダウンロードします。
今回の例では「東京」と「神奈川」のデータをダウンロードします。
ダウンロードしたファイルを解凍すると、下記のファイルが格納されています。
・13tokyo.csv
・14kanaga.csv
上記のファイルを自身の管理しているサーバーに格納します。
※WordPressで上記ファイルを利用する場合は、ファイルの文字コードを”UTF-8″に変更してください。
これで必要なファイルの準備はOKです。
HTMLコードを記述してJavaScriptを仕込む
本サンプルでは下記のようなコードを設置します。
・HTMLコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<form onsubmit="return selectbox_check();"> <p> 県名 :<select name="pref" id="pref" onChange="setMenuAddressItem(0,this[this.selectedIndex].attributes['title'].value)"> <option title="0" value="0" selected>----</option> <option title="13tokyo" value="東京都">東京都</option> <option title="14kanaga" value="神奈川県">神奈川県</option> </select> </p> <p> 市区町村:<select name="city" id="city" onChange="setMenuAddressItem(1,document.getElementById('pref')[document.getElementById('pref').selectedIndex].attributes['title'].value)"> <option value="0" selected>----</option> </select> </p> <p> 町域 :<select name="town" id="town"> <option value="0" selected>----</option> </select> </p> <input type="submit" value="検索"> </form> |
・JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
/** セレクトボックス切り替え関数 **/ function set_menu_address_item(i_type, s_filename){ if(s_filename != '0'){ var o_xmlreq = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成 var s_filepass = 'http://localhost/csv/' + s_filename + '.csv'; // 読み込むファイルのパスを指定 o_xmlreq.open('get', s_filepass, true); // アクセスするファイルを指定 o_xmlreq.send(null); // HTTPリクエスト発行 // レスポンスが返ってきたら続きの処理を行う o_xmlreq.onload = function(){ var a_pref = o_xmlreq.responseText.split("\r\n"); // 改行を区切り文字として行を要素とした配列を生成 if(i_type == 0){ // セレクトボックス初期化 while ( document.getElementById('city').options.length > 0 ) { document.getElementById('city').removeChild(document.getElementById('city').firstChild); } while ( document.getElementById('town').options.length > 0 ) { document.getElementById('town').removeChild(document.getElementById('town').firstChild); } document.getElementById('city').options[0] = new Option('----','0'); //OPTION1番目 document.getElementById('town').options[0] = new Option('----','0'); //OPTION1番目 var i_check_index = 0; for( var i=1; i<a_pref.length; i++ ){ // 各行ごとにカンマで区切った文字列を要素とした配列を生成 var a_pref_disassembly = a_pref[i].split(','); if( a_pref_disassembly.length <= 1 ){ continue; } var s_city_name = a_pref_disassembly[9].replace(/"/g, ''); if(document.getElementById('city').options[i_check_index].text != s_city_name){ document.getElementById('city').options[i_check_index + 1] = new Option(s_city_name,s_city_name); i_check_index++; } } } else { // セレクトボックス初期化 while ( document.getElementById('town').options.length > 0 ) { document.getElementById('town').removeChild(document.getElementById('town').firstChild); } // 選択中の要素を抜き出す var s_selected_city_name = document.getElementById('city').value; document.getElementById('town').options[0] = new Option('----','0'); //OPTION1番目 var i_check_index = 0; for( var i=1; i<a_pref.length; i++ ){ // 各行ごとにカンマで区切った文字列を要素とした配列を生成 var a_pref_disassembly = a_pref[i].split(','); if( a_pref_disassembly.length <= 1 ){ continue; } var s_city_name = a_pref_disassembly[9].replace(/"/g, ''); var s_town_name = a_pref_disassembly[11].replace(/"/g, ''); if((s_selected_city_name == s_city_name) && (' ' != s_town_name) && (document.getElementById('town').options[i_check_index].text != s_town_name)){ document.getElementById('town').options[i_check_index + 1] = new Option(s_town_name,s_town_name); i_check_index++; } } } } } else { // セレクトボックス初期化 while ( document.getElementById('city').options.length > 0 ) { document.getElementById('city').removeChild(document.getElementById('city').firstChild); } while ( document.getElementById('town').options.length > 0 ) { document.getElementById('town').removeChild(document.getElementById('town').firstChild); } document.getElementById('city').options[0] = new Option('----','0'); //OPTION1番目 document.getElementById('town').options[0] = new Option('----','0'); //OPTION1番目 } } /** セレクトボックス入力チェック関数 **/ function selectbox_check(){ if(document.getElementById('pref').selectedIndex == 0){ window.alert('県名を選択してください。'); return false; } if(document.getElementById('city').selectedIndex == 0){ window.alert('市区町村名を選択してください。'); return false; } if(document.getElementById('town').selectedIndex == 0){ window.alert('町域名を選択してください。'); return false; } return true; } |
set_menu_address_item関数で住所リストの切り替えを行っています。
selectbox_check関数はフォームで活用する事を想定して、フォーム送信の際のチェックとして追加してみました。
住所リストの表示にはファイルを読み込んでいるので、やや表示が遅れるタイミングがあります。
リスト選択後に軽いロード画面を挟むようにすると、ユーザーが迷わずに入力できそうですね。
今回は東京と神奈川だけのプログラムを作成しましたが、他の都道府県も同じようにファイルをダウンロードしてHTMLコードにちょっと追記するだけで対応はできると思います。
ただし、「住所.jp」様のサイトで提供されている「全国」のデータを使う場合は、ロードが長くてユーザーのストレスになってしまうことが考えられますので注意が必要です。
ではまた!
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。