<p>JSONデータから都道府県セレクトボックスを生成するサンプル</p>
<div id="app">
    <select name="pref" id="pref">
        <option value=""></option>
    </select>
    <p id="msg">選択したのは: <span id="pref_name"></span>(<span id="pref_id"></span>)</p>
</div>
$(function() {
    let apiUrl =
        "https://script.google.com/macros/s/AKfycbw2CeSCNAD9q-2aJTHFoLWZ5DrFArjJ_Xkyf9ZlXlMYvNK4yZhm/exec";
    $("#msg").hide();
    $.getJSON(apiUrl, function(data) {
        let optionData = '';
        for (var i in data) {
            optionData += "<option value='";
            optionData += data[i].id;
            optionData += "'>";
            optionData += data[i].name;
            optionData += "</option>";
        }
        $("#pref").append(optionData);
    });
    
    $('#app').on('change', '#pref', function () {
        $("#msg").show();
        $("#pref_name").html($("#pref option:selected").html());
        $("#pref_id").html($(this).val());
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js