wordpressでカスタムタクソノミーのajaxドリルダウンを搭載したい

Question

wordpressでカスタムタクソノミーのajaxドリルダウンを搭載しようと下記URLサイトを参考にしました。
https://kurubusi.net/expertise/webblog/drilldown/

前提・実現したいこと

各タームを選択する度に
<select>のoptionの中身がajaxで自動生成されるようにしたいです。

下記は例としてのターム構造です。

カスタムタクソノミー：estate-cat
└ りんご
 　├ 赤
 　└ 青
└ ぶどう
 　├ 白
 　└ 紫
　　 ├ 山梨産
  　 └ 長野産

だとした場合、ぶどうを選んだら、次の<select>タグで白・紫のoptionが生成される。

発生している問題

ぶどう→紫を選んでも三番目の<select>タグのoptionが更新されません。
どうやらタームが子→孫間のデータの受け渡しができてないように感じます。

初めてのajaxなので分からない事ばかりです…。
お手柔らかにご教示いただければと存じます。

該当のソースコード

//functions.php

//メーカーのセレクトボックスを作る
function get_maker_select()
{
    global $wp_query;

    $actives = array();
    foreach ($wp_query->tax_query->queries as $val) {  //現在選択されているメーカーを取得
        $actives = array_merge($actives, $val['terms']);
    }

    $terms = get_terms('estate-cat', array('hide_empty' => 0, 'parent' => 0));  //estate-catから親タームのみ取得
    if (!empty($terms) && !is_wp_error($terms)) {  //空じゃなかったらselectを作成していく
        echo '<select name="maker" id="maker">';
        echo '<option value="" date-tag_id="" ' . $selected . '>選択なし</option>';
        foreach ($terms as $term) {  //各opution作成ループ
            if (in_array($term->slug, $actives)) {  //選択中だったらselectedをつける
                $selected = 'selected';
            } else {
                $selected = '';
            }
            echo '<option value="' . $term->slug . '" date-tag_id="' . $term->term_id . '" ' . $selected . '>' . $term->name . '</option>';  //メーカーopution作成
        }
        echo '</select>';
    }
}


//WPでajaxをするための準備
function include_drilldown()
{
    global $post;
    wp_enqueue_script('drilldown', get_template_directory_uri() . '/js/drilldown.js', array('jquery'));  //wp_head()でdrilldown.jsを読み込む
    wp_localize_script(
        'drilldown',
        'drilldown_vars',
        array(
            'ajaxurl' => admin_url('admin-ajax.php'),
        )
    );  //WPでAjaxをするための準備
}
add_action('wp_enqueue_scripts', 'include_drilldown');  //スクリプトをインクルードするアクションフック


//子タームをjsに返す
function kThePost()
{
    if (!empty($_POST['maker'])) {

        $maker_id = $_POST['maker'];  //フォームからメーカーIDを取得

        $termchildren = get_terms('estate-cat', array('hide_empty' => false, 'parent' => $maker_id));  //メーカーIDから子ターム（車種）のIDの配列を取得

        $result = array();
        foreach ($termchildren as $child) {   //車種のID配列を回す
            $putarray = $child;  //車種IDからオブジェクトを取得
            array_push($result, $putarray);  //子ターム（車種）配列を作っていく
        }
        header('Content-Type: application/json; charset=utf-8');  //お約束
        echo json_encode($result);  //jsに子ターム（車種）オブジェクトを渡す
        die();  //お約束
    }
}
add_action('wp_ajax_kthepost', 'kThePost');  //wp_ajax_アクション名でAjaxリクエストハンドラを行うために実行
add_action('wp_ajax_nopriv_kthepost', 'kThePost');  //wp_ajax_nopriv_アクション名でAjaxリクエストハンドラを行うために実行


//孫タームをjsに返す
function kThePost2()
{
    if (!empty($_POST['vehicle'])) {
        $maker_id2 = $_POST['vehicle'];  //フォームからメーカーIDを取得

        $termgrand = get_term_children($maker_id2, 'estate-cat');  //メーカーIDから子ターム（車種）のIDの配列を取得

        $result2 = array();
        foreach ($termgrand as $grand) {   //車種のID配列を回す
            $putarray = get_term_by('id', $grand, 'estate-cat');  //車種IDからオブジェクトを取得
            array_push($result2, $putarray);  //子ターム（車種）配列を作っていく
        }
        header('Content-Type: application/json; charset=utf-8');  //お約束
        echo json_encode($result2);  //jsに子ターム（車種）オブジェクトを渡す
        die();  //お約束
    }
}
add_action('wp_ajax_kthepost2', 'kThePost2');  //wp_ajax_アクション名でAjaxリクエストハンドラを行うために実行
add_action('wp_ajax_nopriv_kthepost2', 'kThePost2');  //wp_ajax_nopriv_アクション名でAjaxリクエストハンドラを行うために実行 

//drilldown.js

jQuery(function () {

    $(window).ready(function () {
        selectRvent();
        selectRvent2();
    });
    $("select#maker").on("load change", function () {
        selectRvent();
    });
    $("select#vehicle").on("load change", function () {
        selectRvent2();
    });

    function selectRvent() {
        $('#vehicle > option').remove();
        var maker = $('[name=maker] option:selected').attr("date-tag_id");
        $.ajax({
            type: 'POST',
            url: drilldown_vars['ajaxurl'],  //PHPから取得したadmin-ajax.phpまでのURL
            dataType: 'json',
            data: {
                'action': 'kthepost',  //Ajaxアクション名
                'maker': maker
            },
            success: function (response) {  //PHPからメーカーオブジェクトを取得
                $('#vehicle').append($('<option>').html('選択なし').val(''));
                $.each(response, function (index, elem) {
                    $('#vehicle').append($('<option>').html(elem.name).val(elem.slug));  //optionを作成していく
                    if (decodeURI(elem.slug) == elem.vehicle) {
                        $('#vehicle').val(elem.slug);
                    }
                });

            }
        });
    }

    function selectRvent2() {
        $('#vehicle2 > option').remove();
        var vehicle2 = $('[name=vehicle] option:selected').attr("date-tag_id");
        $.ajax({
            type: 'POST',
            url: drilldown_vars['ajaxurl'],  //PHPから取得したadmin-ajax.phpまでのURL
            dataType: 'json',
            data: {
                'action': 'kthepost2',  //Ajaxアクション名
                'maker': vehicle2
            },
            success: function (date) {  //PHPからメーカーオブジェクトを取得
                //console.log(date);
                $('#vehicle2').append($('<option>').html('選択なし').val(''));
                $.each(date, function (index, elem) {
                    $('#vehicle2').append($('<option>').html(elem.name).val(elem.slug));  //optionを作成していく
                    if (decodeURI(elem.slug) == elem.vehicle2) {
                        $('#vehicle2').val(elem.slug);
                    }
                });

            }
        });
    }

});

//archive.php

<form method="post" id="searchform" action="<?php home_url('/') ?>">
            <input type="hidden" name="s" id="s" value="">
            <dl>
                <dt>種類</dt>
                <dd><?php get_maker_select() ?></dd>
            </dl>
            <dl>
                <dt>種別</dt>
                <dd>
                    <select name="vehicle" id="vehicle"></select>
                </dd>
            </dl>
            <dl>
                <dt>産地</dt>
                <dd>
                    <select name="vehicle2" id="vehicle2"></select>
                </dd>
            </dl>
            <input type="submit" class="searchsubmit" value="絞り込む">
        </form>

Answer 1

毎回Ajax通信をするより最初に全ターム情報をJSONデータで取得してその値をjQueryで抽出したほうが
楽な気はしますが、現在の問題点としては

            data: {
                'action': 'kthepost2',  //Ajaxアクション名
                'maker': vehicle2
            },

ここでvehicle2の値をmakerとしてPOSTしているのに対して

function kThePost2()
{
    if (!empty($_POST['vehicle'])) {
        $maker_id2 = $_POST['vehicle'];  //フォームからメーカーIDを取得

ここで判定に$_POST['maker']ではなく$_POST['vehicle']を使用しているせいではないかと思います。

子要素の値をdate-tag_idから取得しようとしていますが、新しく追加されたオプション部分にdate-tag_idが追加されていません。
selectRvent関数の該当箇所を

$('#vehicle').append($('<option>').html(elem.name).val(elem.slug).attr("date-tag_id",elem.term_id));  

に変更してください。

Comments

[maruku_1_27]

gogoweb_ikeda 様　ご回答ありがとうございます。
ご教示頂いた通り、functions.phpの方を$_POST['maker']に変更し、
selectRvent2内で`console.log(date);`でオブジェクトの中身を確認しましたが結果は変わらず0のままでした。

[maruku_1_27]

gogoweb_ikeda 様 追記でのご教示ありがとうございます。

希望通りできました！
本当にありがとうございます。
初めての質問でここまで丁寧に理由と解決法を教えて頂けたこと感謝いたします。