3つの連動するセレクトボックスを外部のJSONデータを用いて作りたい
3階層になっている外部のJSONデータを取得して、3つの連動するセレクトボックスを作りたいです。
まず、selectbox1に出力しようとしているのですが、値に undifined で出てきてしまい困っています。
是非、ご教授いただきたく思います。
html
1<!DOCTYPE html> 2<head> 3</head> 4<body> 5 <div> 6 <label>店<span>*</span></label> 7 <div> 8 <select id="selectbox1" class="input" name="ken"> 9 <option value="">都道府県</option> 10 </select> 11 <select id="selectbox2" class="input" name="address"> 12 <option value="">市区町村</option> 13 </select> 14 <select id="selectbox3" class="input" name="store"> 15 <option value="">店名</option> 16 </select> 17 </div> 18 </div> 19 <script src="../javascript/jquery-3.1.1.min.js"></script> 20 <script src="../javascript/shopselect.js"></script> 21</body>
javascript
1 2 $(function(){ 3 4 $.getJSON("../storeselect.json", function(areaList){ 5 for(var i in areaList){ 6 $("#selectbox1").append("<option value=" + areaList[i].areaNumber + ">" + areaList[i].areaName + "</option>"); 7 } 8 }); 9 });
JSON
1{ 2 "areaList": [ 3 { 4 "areaName": "岩手県", 5 "areaNumber":"1", 6 "cityList": [ 7 { 8 "cityName": "盛岡市", 9 "cityNumber":"1", 10 "storeList": [ 11 { 12 "id": "11", 13 "storeName": "盛岡駅前店", 14 "storeNumber":"1", 15 "link": "morioka" 16 } 17 ] 18 }, 19 { 20 "cityName": "北上市", 21 "cityNumber":"2", 22 "storeList": [ 23 { 24 "id": "6", 25 "storeName": "北上西口店", 26 "storeNumber":"1", 27 "link": "kitakaminishi" 28 }, 29 { 30 "id": "4", 31 "storeName": "北上駅前店", 32 "storeNumber":"2", 33 "link": "kitakamiekimae" 34 } 35 ] 36 } 37 ] 38 }, 39 { 40 "areaName": "神奈川県", 41 "areaNumber":"2", 42 "cityList": [ 43 { 44 "cityName": "横浜市", 45 "storeNumber":"1", 46 "storeList": [ 47 { 48 "id": "7", 49 "storeName": "横浜駅前店", 50 "storeNumber":"1", 51 "link": "yokohamaekimae" 52 } 53 ] 54 } 55 ] 56 } 57 ] 58} 59
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/15 02:21