3つの連動するセレクトボックスを外部のJSONデータを用いて作りたい(完)

selectbox2を変更した場合、selectbox3に対応するJSONデータを表示したいです。
例)selectbox1神奈川県を選択し、selectbox2で横浜市を選択した時、selectbox3に対応データが表示されません。
selectbox2のchangeイベントの時にselectbox1のvalue値が必要なのでしょうか？

どうかご教授のほどよろしくお願いします。

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$(function(){
2  var areaList;
3  var cityList;
4  $.getJSON("../storeselect.json", function(data){
5    areaList=data.areaList;
6    for(var i in areaList){
7      $("#selectbox1").append("<option value=" + areaList[i].areaNumber + ">" + areaList[i].areaName + "</option>");
8    }
9  });
10  $("#selectbox1").on('change',function(){
11    var v=$(this).val();
12    var area=areaList.filter(function(x){
13      return x.areaNumber==v;
14    });
15    $("#selectbox2 option:gt(0)").remove();
16    if(area.length>0){
17      cityList=area[0].cityList;
18      for(var i in cityList){
19        $("#selectbox2").append("<option value=" + cityList[i].cityNumber + ">" + cityList[i].cityName + "</option>");
20      }
21    }
22  });
23  $("#selectbox2").on('change',function(){
24    var v=$(this).val();
25    var city=cityList.filter(function(x){
26      return x.cityNumber==v;
27    });
28    $("#selectbox3 option:gt(0)").remove();
29    if(city.length>0){
30      storeList=city[0].storeList;
31      for(var i in storeList){
32        $("#selectbox3").append("<option value=" + storeList[i].storeNumber + ">" + storeList[i].storeName + "</option>");
33      }
34    }
35  });
36});
37

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}

行動規範の内容に同意します

回答1件

ベストアンサー

storeはcityの応用なのでうまく読み替えてくれるかと思ったのですが
やはりつまづきましたか・・・

javascript
1$(function(){
2  var areaList,cityList,storeList;
3  $.getJSON("../storeselect.json", function(data){
4    areaList=data.areaList;
5    for(var i in areaList){
6      $("#selectbox1").append("<option value=" + areaList[i].areaNumber + ">" + areaList[i].areaName + "</option>");
7    }
8  });
9  $("#selectbox1").on('change',function(){
10    var v=$(this).val();
11    var area=areaList.filter(function(x){
12      return x.areaNumber==v;
13    });
14    $("#selectbox2 option:gt(0),#selectbox3 option:gt(0)").remove();
15    if(area.length>0){
16      cityList=area[0].cityList;
17      for(var i in cityList){
18        $("#selectbox2").append("<option value=" + cityList[i].cityNumber + ">" + cityList[i].cityName + "</option>");
19      }
20    }
21  });
22  $("#selectbox2").on('change',function(){
23    var v=$(this).val();
24    var city=cityList.filter(function(x){
25      return x.cityNumber==v;
26    });
27    $("#selectbox3 option:gt(0)").remove();
28    if(city.length>0){
29      storeList=city[0].storeList;
30      for(var i in storeList){
31        $("#selectbox3").append("<option value=" + storeList[i].storeNumber + ">" + storeList[i].storeName + "</option>");
32      }
33    }
34  });
35});