<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());
});
});
This Pen doesn't use any external CSS resources.