3年に1度は必ず実装する必要がある技術。
覚え書きです。
<html>
<head>
<title>JS</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
</script>
</head>
<body>
<select name="item" id="item">
<option value="">りんご</option>
<option value="">イチゴ</option>
<option value="">バナナ</option>
</select>
<script>
$(function(){
$('#item').change(function(){
$.ajax({
url:"/data.json",
type:"POST",
data:$("#form1").serialize(),
dataType:"json",
timespan:1000
}).done(function(data1,textStatus,jqXHR) {
console.log(jqXHR.status);
console.log(textStatus);
console.log(data1);
console.log(data1["data"][0].name);
var data2 = JSON.stringify(data1);
console.log(data2);
var data3 = JSON.parse(data2);
console.log(data3);
$("#item option").remove();
$("#item").append("<option></option>");
$.each(data3["data"], function(key, value){
console.log(key + ':' + value);
$("#item").append($("<option>").val(value.id).text(value.name));
});
}).fail(function(jqXHR, textStatus, errorThrown ) {
console.log(jqXHR.status);
console.log(textStatus);
console.log(errorThrown);
console.log('Failed');
}).always(function(){
console.log("complete");
});
});
});
</script>
</body>
</html>
{"data" : [
{
"id" : "1",
"name" : "太郎",
"age" : "12"
},
{
"id" : "2",
"name" : "花子",
"age" : "14"
},
{
"id" : "3",
"name" : "金太郎",
"age" : "32"
},
{
"id" : "4",
"name" : "桃太郎",
"age" : "47"
},
{
"id" : "5",
"name" : "赤太郎",
"age" : "23"
}
]}