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" } ]}