プルダウンメニューが正しく動作しません。

前提

ここに質問の内容を詳しく書いてください。
（例）
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ソースの８行目の.prefを削除。
８行目の構文をコメントアウトなどの対応を試みましたが、
問題が解決しませんでした。

int32_t

2022/12/27 08:37 編集

> var code = ('00'+code).slice(-2); // ゼロパディングこの行が明らかにおかしいです。code変数をもとにしてcode変数を初期化しています。この関数はどういうデータからどういう結果を得るためのものでしょうか。

回答1件

https://lancers.work/pref-city-form-jquery-json/
ここですよね

JavaScript
1window.addEventListener('load', function() {
2    $(function() {
3        $.getJSON('pref_city.json', function(data) {
4            for (var i = 1; i < 48; i++) {
5                //var code = ('00' + code).slice(-2); // ゼロパディング
6                var code = ('00' + i).slice(-2); // 上記はバグですね
7                console.log(code);
8                //$('#select-pref').append('' + data[i - 1][code].pref + '');
9                var option = $('<option/>', {
10                    value: data[i - 1][code].id,
11                    text: data[i - 1][code].pref
12                });
13                $('#select-pref').append(option); // 他にもやりようは色々あると思いますが
14            }
15        });
16    });
17
18    // 都道府県メニューに連動した市区町村フォーム生成
19    $('#select-pref').on('change', function() {
20        $('#select-city option:nth-child(n+2)').remove();
21        // ※1 市区町村フォームクリア
22        var select_pref = ('00' + $('#select-pref option:selected').val()).slice(-2);
23        var key = Number(select_pref) - 1;
24        $.getJSON('pref_city.json', function(data) {
25            for (var i = 0; i < data[key][select_pref].city.length; i++) {
26                //$('#select-city').append('' + data[key][select_pref].city[i].name + '');
27                var option = $('<option/>', {
28                    value: data[key][select_pref].city[i].id,
29                    text: data[key][select_pref].city[i].name
30                });
31                $('#select-city').append(option);
32            }
33        });
34    });
35});