Rails5.1.3でWebアプリケーション制作の勉強をしています。
「県名」「市区町村」「町域」の住所選択用セレクトボックスを作成したいのですが、
サイト上で「CSVファイルをダウンロードして自身の管理しているサーバーに格納します。」との説明がありました。
ダウンロードして解凍したファイルは 13tokyo.csv と 14kanaga.csv です。
初心者なのでよくわからないのですが、13tokyo.csv、14kanaga.csv を保存する場所はどこに保存すれ場所いいのでしょうか?
app/view/customer/13tokyo.csvのようにcustomerフォルダの下に格納すればいいのでしょうか?
どなたか教えていただけないでしょうか?宜しくお願いします。
サイト上のコードは以下になります。これを応用して使用したいのですがよくわかりません。
HTMLコード <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コード /** セレクトボックス切り替え関数 **/ 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; }
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2018/12/01 03:06