【タブ切り替え】地方-都道府県-市区町村が連動【PHP + jQuery + json】

地方､都道府県､市区町村のjsonファイルから､PHPファイルにそれぞれHTMLに書き出します｡

地方､都道府県はul､liタグで書き出し､市区町村は都道府県ごとに区切ってul､liで書き出します｡

地方と都道府県の連動にはdata-region属性､都道府県と市区町村の連動にはdata-pref属性を使います｡

このdata属性をjQueryで使ってタブを切り替えることになります｡

<?php
// 地方
$region = get_json( "./region.json" );

// 都道府県
$pref = get_json( "./pref.json" );

// 市町村
$city = get_json( "./city.json" );

// 地方　idとslugの変換用
$regions = [];
foreach( $region as $key => $value ){
	$regions[ $value["id"] ] = $value;
}

// 都道府県　codeとslugの変換用
$prefs = [];
foreach( $pref as $key => $value ){
	if( $value["region"] ){
		$prefs[ $value["code"] ] = mb_strtolower( $value["name_en"] );
	}
}

//地方
    if( $region ){
?>
            <ul class="region-list">
<?php
      foreach( $region as $key => $value ){
?>
              <li class="region-list__item js-region" data-region="<?php echo $value["name_en"]; ?>"><?php echo $value["name"]; ?></li> 
<?php
      }
?>
            </ul>
<?php
    }
?>

<?php
//都道府県
    if( $pref ){
?>
            <ul class="pref-list">
<?php
      foreach( $pref as $key => $value ){
        if( $value["region"] ){
?>
              <li class="pref-list__item js-pref" data-region="<?php echo $regions[ $value["region"] ]["name_en"]; ?>" data-pref="<?php echo mb_strtolower( $value["name_en"] ); ?>"><?php echo $value["name"]; ?></li> 
<?php
        }
      }
?>
            </ul>
<?php
    }
?>

            <div class="city-content">
<?php
//市区町村
    if( $city ){
      foreach( $city as $key => $value ){
?>
              <ul class="city-list" data-pref="<?php echo $prefs[ $key ]; ?>">
<?php
        foreach( $value as $k => $val ){
?>

                <li class="city-list__item"><?php echo $val["name"]; ?></li>
<?php
        }
?>
              </ul>
<?php
      }
    }
?>
            </div>

data属性については､こちらの記事で解説しています｡

データ属性の取得方法（jQuery・JavaScript・CSS）【HTML】

HTMLのdata属性の使い方を知りたいですか？この記事では、data属性の使い方、JavaScript、jQuery、CSSでのdata属性の取得方法を紹介しています。ぜひご覧ください。

地方-都道府県-市区町村が連動するタブ切り替え (デモ) で使用しているCSSを貼っておきますが､ここは好みのデザインに調整してもらえれば大丈夫です｡

選択中のタブに使うclass名を「current」としています｡

選択した地方に対応する都道府県のclass名を「active」としています｡

.region-list{
	display: flex;
	width: 100%;
}
.region-list__item{
	padding: .25em 1em;
	color: #fff;
	background: #333;
	cursor: pointer;
}
.region-list__item.current{
	background: red;
}
.pref-list{
	display: flex;
	width: 100%;
}
.pref-list__item{
	padding: .25em 1em;
	color: #fff;
	background: #333;
	cursor: pointer;
}
.pref-list__item.current{
	background: blue;
}
.pref-list__item:not(.active){
	display: none;
}
.city-content{
	padding: 2em;
	width: 100%;
	background: repeating-linear-gradient(-45deg,transparent,transparent 5px,#eee 0,#eee 6px);
}
.city-list.current{
	display: flex;
	flex-flow: row wrap;
}
.city-list:not(.current){
	display: none;
}
.city-list__item{
	line-height: 2;
}
.city-list__item:not(:last-child):after{
	content: "｜";
	margin: 0 .5em;
}

最後にjQueryを指定します｡

地方のdata-region属性の値を取得して､都道府県のdata-region属性と一致するものに「.active」が設定されます｡
同時にクリックした地方自体に「.current」を設定されます｡

都道府県のdata-pref属性の値を取得して､都道府県のdata-pref属性と一致するものに「.current」が設定されます｡
同時にクリックした都道府県自体に「.current」を設定されます｡

上記の2つの動きを関数にして､読み込んだとき､地方をクリックしたとき､都道府県をクリックしたときに動作するようにします｡

地方をクリックしたときには､都道府県の状態はリセットしてactiveの中で最初の都道府県がcurrentになるようにしています｡

デモではheadタグにscriptを書いていますが､jsファイルをつくってファイルを分けてもかまいません｡

$(function(){
	// 最初に読み込んだとき
	$( ".region-list__item" ).eq(0).addClass("current");
	region_active();
	pref_active();

	// 地方をクリックしたとき
	$(".js-region").on("click",function(){
		$(".js-region").removeClass("current");
		$(this).addClass("current");

		$(".js-pref").removeClass("active");

		region_active();
		pref_active();
	});

	// 都道府県をクリックしたとき
	$(".js-pref").on("click",function(){
		$(".js-pref").removeClass("current");
		$(this).addClass("current");

		pref_active();
	});

	// 都道府県の動きの関数
	function region_active(){
		region = $( ".region-list__item.current" ).data("region");

		$( ".pref-list__item:not(.current)" ).removeClass("active");
		$( ".pref-list [data-region=" + region + "]" ).addClass("active");

		$( ".pref-list__item" ).removeClass("current");
		$( ".pref-list__item.active" ).eq(0).addClass("current");
	}

	// 市区町村の動きの関数
	function pref_active(){
		pref = $( ".pref-list__item.current" ).data("pref");

		$( ".city-list" ).removeClass("current");
		$( ".city-content [data-pref=" + pref + "]" ).addClass("current");
	}
});