Tweet

Pocket

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