前提
ここに質問の内容を詳しく書いてください。
(例)
Javascript(jQuery)で都道府県、市区町村が表示されるプルダウンメニューを作成しています。
選択した都道府県に対応した市区町村を選択できる様に作成しましたが、都道府県、市区町村ともに
正しく動作が出来ない状況です。
Google Chromeのデベロッパーツールに確認したところ、以下エラーメッセージが表示されていました。
Uncaught TypeError: Cannot read properties of undefined (reading 'pref')
at Object.success (Prefectures.js:8:51)
at fire (jquery-3.6.0.js:3500:31)
at Object.fireWith [as resolveWith] (jquery-3.6.0.js:3630:7)
at done (jquery-3.6.0.js:9796:14)
at XMLHttpRequest.<anonymous> (jquery-3.6.0.js:10057:9)
※都道府県データjsonファイル(pref_city.json)を読み込ませています。
該当のソースコード(HTML)
ファイル名:test.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <script src="Prefectures.js"></script> <title>TEST</title> </head> <body> <select id="select-pref"><option value="">都道府県を選択してください</option></select> <select id="select-city"><option value="">市区町村を選択してください</option></select> </body> </html>該当のソースコード(Javascript(jQuery))
ファイル名:Prefectures.js
// 都道府県フォーム生成
window.addEventListener('load', function(){
$(function() {
$.getJSON('pref_city.json', function(data) {
for(var i=1; i<48; i++) {
var code = ('00'+code).slice(-2); // ゼロパディング
console.log(code);
$('#select-pref').append(''+data[i-1][code].pref+'');
}
});
});
// 都道府県メニューに連動した市区町村フォーム生成
$('#select-pref').on('change', function() {
$('#select-city option:nth-child(n+2)').remove(); // ※1 市区町村フォームクリア
var select_pref = ('00'+$('#select-pref option:selected').val()).slice(-2);
var key = Number(select_pref)-1;
$.getJSON('pref_city.json', function(data) {
for(var i=0; i<data[key][select_pref].city.length; i++){
$('#select-city').append(''+data[key][select_pref].city[i].name+'');
}
});
});
});リンク内容
ソースコード
試したこと
Javascriptソースの8行目の.prefを削除。
8行目の構文をコメントアウトなどの対応を試みましたが、
問題が解決しませんでした。
