ACFでセレクトメニューを動的に生成

WordPressでカスタムフィールド設定用のプラグインAdvanced Custom Fieldsを使用中の環境で、記事投稿ページからセレクトメニューを選択すると、選択したものと連動したセレクトメニューが次に表示されるというシステムが欲しかった。以下に方法をメモ。

やりたいこと

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示され、さらに都道府県を選ぶと路線が、路線を選ぶと駅名が選択できるといった一連のセレクトメニューをWordPressの記事一覧ページに作成したかった。

都道府県等のデータ用意やセレクトメニュー自体の作成方法は以下記事を参照。

八地方区分→都道府県→路線→駅名の連携したセレクトメニュー

ACF側の設定

以下のような形で設定しておく。

functions.phpに追記

#js呼び出し
function search_station_js($hook) {
	if($hook == 'post.php' || $hook == 'post-new.php'){
		#JSファイル設置場所
		wp_enqueue_script('custom_admin_script', '/hogehoge/js/search_station.js', array('jquery'));
	}
}
add_action('admin_enqueue_scripts', 'search_station_js');

#ajax受信用
function search_station(){

	#DB接続
	global $wpdb;
	$mysqli = new mysqli($wpdb->dbhost, $wpdb->dbuser, $wpdb->dbpassword, $wpdb->dbname);
	$mysqli->set_charset('utf8');

	$mode = $_POST['mode'];

	$result = false;

	#エリア選択
	if( $mode == 'region' && $_POST['id'] ){
		$sql = '
			SELECT * 
			FROM cps_prefecture 
			WHERE region_id = "' . $mysqli->real_escape_string($_POST['id']) . '"
		';
		$row = $mysqli->query($sql);
		while ($rs = $row->fetch_array(MYSQLI_ASSOC)) {
			$result[] = $rs;
		}

	#都道府県選択
	}else if( $mode == 'prefecture' && $_POST['id'] ){
		$sql = '
			SELECT 
				c.company_cd, c.company_name, c.company_name_r, c.company_type, c.subway, 
				l.line_name, l.line_cd, 
				s.pref_cd 
			FROM cps_company AS c 
			LEFT JOIN cps_line AS l 
			ON c.company_cd = l.company_cd
			LEFT JOIN cps_station AS s 
			ON l.line_cd = s.line_cd 
			WHERE s.e_status = 0 
			AND l.e_status = 0 
			AND s.e_status = 0 
			AND s.pref_cd = "' . $mysqli->real_escape_string($_POST['id']) . '" 
			GROUP BY l.line_cd
		';
		$row = $mysqli->query($sql);
		while ($rs = $row->fetch_array(MYSQLI_ASSOC)) {
			$result[] = $rs;
		}

	#路線選択
	}else if( $mode == 'station' && $_POST['id'] ){
		$sql = '
			SELECT * 
			FROM cps_station 
			WHERE line_cd = "' . $mysqli->real_escape_string($_POST['id']) . '" 
			AND e_status = 0 
		';
		$row = $mysqli->query($sql);
		while ($rs = $row->fetch_array(MYSQLI_ASSOC)) {
			$result[] = $rs;
		}
	}

	#結果がある場合は返す
	if( $result ){
		echo json_encode($result);
	}

	die();
}
add_action( 'wp_ajax_select_station', 'search_station' );

global $wpdb;
$mysqli = new mysqli($wpdb->dbhost, $wpdb->dbuser, $wpdb->dbpassword, $wpdb->dbname);

JavaScript

今回だと「/hogehoge/js/search_station.js」のファイルを以下内容でアップロードする。

//ACF設定画面のKeyをここに書く
var region_id = 'acf-field_xxxxxxxxxxxxxx';
var prefecture_id = 'acf-field_xxxxxxxxxxxxxx';
var subway_id = 'acf-field_xxxxxxxxxxxxxx';
var private_id = 'acf-field_xxxxxxxxxxxxxx';
var jr_id = 'acf-field_xxxxxxxxxxxxxx';
var station_id = 'acf-field_xxxxxxxxxxxxxx';

(function($) {
	$(document).ready(function(){

		$(document).on( 'change blur', `#${region_id}, #${prefecture_id}, #${subway_id}, #${private_id}, #${jr_id}`, function(){

			var selecter_id = $(this).attr("id");

			//エリア選択
			if( selecter_id == region_id ){
				var mode = 'region';

			//都道府県選択
			}else if( selecter_id == prefecture_id ){
				var mode = 'prefecture';

			//路線選択
			}else{
				var mode = 'station';
			}

			$.ajax({
				type: 'POST',
				url: ajaxurl,
				data: {
					'action' : 'select_station', 
					'id' : $(this).val(), 
					'mode' : mode
				},
				success: function( result ){

					//エリア選択
					if( selecter_id == region_id ){
						var prefecture = $.parseJSON(result);
						var html = '';
						for(var key in prefecture){
							html += '<option value="' + prefecture[key]['id'] + '">' + prefecture[key]['name'] + '</option>';
						}
						$('#' + prefecture_id).html(html);

					//都道府県選択
					}else if( selecter_id == prefecture_id ){
						var line = $.parseJSON(result);
						var subway = '';
						var private = '';
						var jr = '';

						for(var key in line){
							if( line[key]['subway'] == 1 ){
								subway += '<option value="' + line[key]['line_cd'] + '">' + line[key]['line_name'] + '</option>';
							}else if( line[key]['company_type'] == 1 ){
								jr += '<option value="' + line[key]['line_cd'] + '">' + line[key]['line_name'] + '</option>';
							}else{
								private += '<option value="' + line[key]['line_cd'] + '">' + line[key]['line_name'] + '</option>';
							}
						}

						$('#' + subway_id).html(subway);
						$('#' + private_id).html(private);
						$('#' + jr_id).html(jr);

					//路線選択
					}else{
						var station = $.parseJSON(result);
						var html = '';
						for(var key in station){
							html += '<option value="' + station[key]['station_cd'] + '">' + station[key]['station_name'] + '</option>';
						}
						$('#' + station_id).html(html);
					}

				}
			});
			return false;
		});
	});
})(jQuery);

あとACFを使っているとjQuery等で各カスタムフィールドが後から追加されるので、4行目の部分は以下の通り注意する。

#後から追加される要素はこれだと動かない
$('セレクタ').change(function()){

#これだと動く
$(document).on( 'change blur', `セレクタ`, function(){