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

2022/11/15

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

県名と区市町村名の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();

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

共有:

関連