###前提・実現したいこと
親セレクトボックスの中身を入れ替えることで、子セレクトボックスのoptionを入れ替えるjQueryコードを書いた。
.change
と.empty
イベントを使用しているため、最初に画面がロードされた時点では子セレクトボックスの中身が何も表示されない。最初に画面がロードされた時点でも子セレクトボックスの中身を表示させたい。
###該当のソースコード
html
1<select id="tagKey"></select><select id="tagValue"></select>
javascript
1 /*---------------------------------------------------- 2 JSONをセレクトボックスに格納 3 ----------------------------------------------------*/ 4 var tagObj = new Object; 5 $.getJSON("json/tag.json", function (selTagKey) { 6 var _key = selTagKey.key; 7 tagObj = selTagKey; 8 for (var i in _key) { 9 for (var n in _key[i]) { 10 var test = _key[i][n]; 11 var options = $('<option></option>', { 12 text: test.label, 13 "value": test.data, 14 "selected": test.selected 15 }); 16 $("#tagKey").append(options); 17 for (var v in _key[i][n]['value']) { 18 var _val = _key[i][n]['value'][v]; 19 var child_options = $('<option></option>', { 20 text: _val.label, 21 "value": _val.data, 22 "selected": _val.selected 23 }); 24 } 25 } 26 }; 27 }); 28 /*---------------------------------------------------- 29 セレクトボックス中身切り替え 30 ----------------------------------------------------*/ 31 32 $("#tagKey").on("change", function () { 33 $("#tagValue").empty(); 34 var _key = tagObj.key[0][$(this).val()]['value']; 35 for (var v in _key) { 36 var _val = _key[v]; 37 var child_options = $('<option></option>', { 38 text: _val.label, 39 "value": _val.data, 40 "selected": _val.selected 41 }); 42 $("#tagValue").append(child_options); 43 } 44 });
json
1{ 2 "key": [{ 3 "hoge": { 4 "label": "Tom", 5 "data": "data-1", 6 "selected": true, 7 "value": [ 8 { 9 "label": "Dick", 10 "data": "data-2", 11 "selected": true 12 }, 13 { 14 "label": "Harry", 15 "data": "data-3", 16 "selected": false 17 }, 18 { 19 "label": "None", 20 "data": "None", 21 "selected": false 22 } 23 ] 24 }, 25 26 "huga": { 27 "label": "Ann", 28 "data": "data-a", 29 "selected": false, 30 "value": [ 31 { 32 "label": "Liz", 33 "data": "data-b", 34 "selected": true 35 }, 36 { 37 "label": "Nancy", 38 "data": "data-c", 39 "selected": false 40 }, 41 { 42 "label": "None", 43 "data": "None", 44 "selected": false 45 } 46 ] 47 } 48 } 49 ] 50}
何卒よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/26 10:13 編集
2016/10/26 10:16
2016/10/26 10:30