質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.35%

「県名」「市区町村名」「町域」の住所選択用セレクトボックスを作りたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 919

score 11

下記のサイトを参考に「県名」「市区町村名」「町域」の住所選択用セレクトボックスを作りたいと考えています。
https://incloop.com/%E4%BD%8F%E6%89%80%E9%81%B8%E6%8A%9E%E7%94%A8%E3%81%AE%E3%82%BB%E3%83%AC%E3%82%AF%E3%83%88%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%82%92%E4%BD%9C%E6%88%90/

とても丁寧に書かれており、わかりやすく、その通りにやってみたのですが、市区町村名と町域を選ぶことができません。
何か他にJavaScriptを読み込む必要があるのでしょうか?
ちなみに実装したいサイトはhttps:です。
また、他にこのような形のものが作れる参考サイトをご存知でしたら、教えていただけますと幸いです。

ソースを載せさせていただきます。
<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>

<script type="text/javascript">
/ セレクトボックス切り替え関数 /
function set_menu_address_item(i_type, s_filename){
if(s_filename != '0'){
var o_xmlreq = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成
var s_filepass = 'https://●●●●●●●●●●●●●' + 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;
}
</script>

phpやJavaScriptに明るくなく、つまずいてしまい投稿させていただきました。
何卒どうぞよろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mikiko

    2020/03/21 15:09 編集

    m.ts10806様

    コメントありがとうございます。
    コードを載せさせていただきます。

    キャンセル

  • CHERRY

    2020/03/21 15:21

    コメント欄にコードを書かれても見にくいので、質問を編集して追記してください。

    キャンセル

  • mikiko

    2020/03/21 15:53

    大変失礼いたしました。質問にソースを追記させていただきました。

    キャンセル

回答 1

checkベストアンサー

+1

下記のサイトを参考に「県名」「市区町村名」「町域」の住所選択用セレクトボックスを作りたいと考えています。

本題ではありませんが、日本の住所は千差万別なので、この形に合わないものも多く存在します。

  • 市町村名の次がいきなり番地
  • 京都市内の通り名住所、岩手県の「地割」、北海道の「○条□丁目」「○線□号」など地域特有のもの
  • 大字・小字など多層的になった住所

市町村まではいいとして、それ以降をパターン化するのはやめておいたほうがいいです(入力できない住所があると問題になってしまいます)。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/22 01:33

    コメントありがとうございます。なるほど・・・検討してみますね。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る