【JQuery】JSONデータを使って、select選択で別selectの内容を切り替える
JSONデータからselectの内容を表示して、そのselectを切り替えると別selectの内容も切り替わる方法
HTML
<select id="area"> </select> <select id="area2"> </select>
JSON(data.json)
[ { "category":[ { "area": 0, "name": "すべて" },{ "area": 1, "name": "北海道・東北" }, { "area": 2, "name": "関東" }, { "area": 3, "name": "東海・北信越" }, { "area": 4, "name": "関西" }, { "area": 5, "name": "中国・四国" }, { "area": 6, "name": "九州・沖縄" } ], "subCategory":[ { "name": "北海道", "area": 1 }, { "name": "青森県", "area": 1 }, { "name": "東京都", "area": 2 }, { "name": "神奈川県", "area": 2 }, { "name": "愛知県", "area": 3 }, { "name": "岐阜県", "area": 3 }, { "name": "大阪府", "area": 4 }, { "name": "兵庫県", "area": 4 }, { "name": "岡山県", "area": 5 }, { "name": "広島県", "area": 5 }, { "name": "福岡県", "area": 6 }, { "name": "佐賀県", "area": 6 } ] } ]
JQuery
$(function() { var jsonUrl = "js/data.json"; $.getJSON(jsonUrl, function(data) { // エリアデータをselectに表示 for(var i in data) { for(var j in data[i]["category"]) { var appendObj = "<option value=" + data[i]["category"][j].area + ">" + data[i]["category"][j].name + "</option>"; $("#area").append(appendObj); } } // 都道府県データを全件表示する関数をセット function prefDataAll(data){ for(var i in data) { for(var j in data[i]["subCategory"]) { var appendObj2 = "<option value=" + data[i]["subCategory"][j].pref + ">" + data[i]["subCategory"][j].name + "</option>"; $("#area2").append(appendObj2); } } } // 都道府県データをselectに表示 prefDataAll(data); // エリア選択で都道府県データを切り替える $("#area").on('change' , function(){ // 都道府県データをselectから一度全消去 $("#area2").empty(); // 選択したエリアのvalueを変数へ入れる var areaNo = $(this).val(); if ($(this).val() == "0") { // 選択したエリアのvalueが0なら全表示の関数を呼び出す prefDataAll(data); } else { // 選択したエリアのvalueが0以外ならソート表示の関数を呼び出す prefData(data); } // 都道府県データをソート表示する関数をセット function prefData(data){ for(var i in data) { for(var j in data[i]["subCategory"]) { if (data[i]["subCategory"][j].area == areaNo) { var appendObj2 = "<option value=" + data[i]["subCategory"][j].pref + ">" + data[i]["subCategory"][j].name + "</option>"; $("#area2").append(appendObj2); } } } } }); }); });
コメントを残す