【Javascript】AJAXを使って県名・市町村名セレクターを作ってみた

2022/11/15

ちょっと前にJavascriptでAJAXを使ってJSONを読み込んで表示する方法について書きましたが、この仕組みを使って地域セレクタを作ってみました。

県名と区市町村名のJSONデータは以下のサイトからコピペしました。

Qiita

【JSON】都道府県市区郡一覧作ってみた - Qiita

都道府県と市区郡のみの一覧東京都だけ【村】、【島】、【町】があるけど東京都以外の46道府県は市区郡のみのJSONデータです。書き方間違ってたら指摘して頂けると有難いです。よくあるドロップダウンメニューで都道府県を選択すると...

出来上がったものは以下の動画のように県名を選択するとそれに応じた区市町村名が選択できるようになります。

まずHTMLから。

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地域セレクタ</title>
    <style>
        .prefucture, .city{
            font-size: 24pt;
        }
    </style>
</head>
<body>
    <h1>地域セレクタ</h1>

    <div id="areaSelector">
        <select class="prefucture"></select>
        <select class="city"></select>
    </div>

    <script src="address.js"></script>
</body>
</html>

Javascriptのソースコードはこちらです。

async function getPrefecture(){
    const response = await fetch('./address.json');
    const data = await response.json();
    let option = [];
    for(let i=0; i<Object.keys(data[0]).length; i++){
        label = (i+1).toString().padStart(2, '0');
        option.push(`
            <option name="${data[0][label].name}" value="${data[0][label].id}">
            ${data[0][label].name}
            </option>
        `);
    }
    const select = document.getElementById('areaSelector').querySelector('.prefucture');
    select.innerHTML = option.join('');

    getCity(data[0]['01'].id);

    select.onchange = event => { 
        getCity(select.value);
    }

}

async function getCity(id){
    const response = await fetch('./address.json');
    const data = await response.json();

    console.log(Object.keys(data[0][id].city).length);

    let option = [];
    for(let i=0; i<Object.keys(data[0][id].city).length; i++){
        option.push(`
            <option name="${data[0][id].city[i].city}" value="${data[0][id].city[i].citycode}">
            ${data[0][id].city[i].city}
            </option>
        `);
    }
    const select = document.getElementById('areaSelector').querySelector('.city');
    select.innerHTML = option.join('');
}

getPrefecture();

- HTML/JavaScript