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

まずは、selectbox1で値を選択した時、selectbox2にJSONのstoreNameを表示させたいのですが、selectbox1を変更してもselectbox2にJSONデータが表示されません。

どうかご教授いただきたく思います。

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
3  $.getJSON("../storeselect.json", function(data){
4      for(var i in data.areaList){
5        $("#selectbox1").append("<option value=" + data.areaList[i].areaNumber + ">" + data.areaList[i].areaName + "</option>");
6        }
7      });
8
9  $("#selectbox1").chabge(function(){
10      $.getJSON("../storeselect.json", function(data){
11        for(var i in data.areaList){
12          for(var j in data.areaList[i].cityList){
13            $("#selectbox2").append("<option value=" + data.areaList[i].cityList[j].cityNumber + ">" + data.areaList[i].cityList[j].cityName + "</option>");
14          }
15        }
16      });
17   });
18});
19

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}

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

回答2件

ベストアンサー

たとえばこう

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});