さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】JSONデータを使って、select選択で別selectの内容を切り替える

Pocket
LINEで送る

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

カテゴリー:HP制作, JQuery

コメントを残す

コメント内容