質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Q&A

解決済

1回答

2833閲覧

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

rere

総合スコア13

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

0グッド

0クリップ

投稿2018/03/15 09:04

編集2018/03/16 00:38

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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

ちなみにご提示のJSONデータが間違っていますね

cityListのうち、cityName=横浜市のプロパティ

"storeNumber":"1",

となっていますが

"cityNumber":"1",

としないと正しく参照できません。

投稿2018/03/15 09:20

編集2018/03/15 09:22
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rere

2018/03/15 09:37

何度もありがとうございます。 本当に助かりました。。。 次回からはもっと理解を深めてから質問いたします。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問