Динамические зависимые выпадающие списки для категорий, подкатегорий и постов

Я использую WordPress 3.5. Мне нужен способ реализовать код или плагин, чтобы пользователи могли проходить по постам, используя зависимые (связанные) выпадающие списки.

Другими словами, я хотел бы, чтобы 3 выпадающих меню заполнялись динамически на основе выбора, сделанного в предыдущих выпадающих списках.

Это будет состоять из:

Выпадающий список 1: Категория*
Выпадающий список 2: Подкатегория* 
Выпадающий список 3: Список постов в подкатегории*

*Выпадающий список 1 будет предварительно заполнен категориями.

*Выпадающий список 2 будет перечислять подкатегории меню 1 на основе выбора пользователя.

*Выпадающий список 3 будет перечислять посты в подкатегории, выбранной в меню 2.

Чтобы помочь вам понять лучше, на моем сайте есть категория “Сериалы”, которая имеет подкатегории (дочерние) другие сериалы, такие как “Декстер”, “CSI:Майами” и т.д.
Сериалы также имеют другие подкатегории (дочерние) по количеству сезонов, такие как:

1. "Сезон 1"
2. "Сезон 2"
3. "Сезон N".

Каждый сезон содержит соответствующие посты.

Иерархия выглядит так:

Сериалы (главная категория)

Декстер

 Сезон 1
 Сезон 2
 Сезон n

CSI:Майами

 1. Сезон 1
 2. Сезон 2
 3. Сезон n

Так что, например, динамические выпадающие списки, которые я хотел бы использовать, следующие:

Выпадающий список 1: Выберите ТВ шоу (категория)
Выпадающий список 2: Выберите сезон (подкатегория)
Выпадающий список 3: Выберите эпизод (посты)

Я искал в интернете последние несколько дней без каких-либо результатов.

Я уже пробовал плагин под названием Category Ajax Chain Selects, но он устарел и не работает должным образом.

вы можете найти свой ответ здесь и вот демо этого.

Пример HTML кода

<div class="ccms_form_element cfdiv_custom" id="style_container_div">

<label for="brand">Марка:</label>

<select size="1" id="make" class=" validate['required']" title=""  onChange="updatepage();" type="select" name="style">
<option value="-1">–Выберите марку-</option>
<option class="Audio" value="Audi">Audi</option>
<option class="BMW" value="BMW">BMW</option>
</select>
    <div class="clear"></div><div id="error-message-style"></div>

<div id="style-sub-1"  class="BMW"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
    <label for="brand">Модель:</label>

<select name="cat" id="cat" class="postform">
<option value="-1">–Выберите модель-</option>
<option class="level-0" value="172">1 серия</option>
<option class="level-0" value="173">2 серия</option>
<option class="level-0" value="106">3 серия</option>
</select>
</div>
<div id="style-sub-1"  class="Audi"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
    <label for="brand">Модель:</label>

<select name="cat" id="cat" class="postform">
<option value="-1">–Выберите модель-</option>
<option class="level-0" value="169">A1</option>
<option class="level-0" value="170">A3</option>
<option class="level-0" value="171">A4</option>
</select>
</div>
<div class="clear"></div>
<div id="error-message-style-sub-1"></div></div>

JS код

$("#make").change ( function () {
  var targID  = $(this).val ();
  $("div#style-sub-1").hide ();
  $('.' + targID).show ();
});

вы должны рассмотреть возможность включения jQuery и перемещения кода из функции, чтобы он вызывался.

<!-- Ваш файл шаблона (например, page-template.php) -->

<form action="#" method="post">
    <label for="tv-show-dropdown">Выберите ТВ шоу:</label>
    <select name="tv-show" id="tv-show-dropdown">
        <?php
        $tv_shows = get_terms(array('taxonomy' => 'tv_show', 'hide_empty' => false));
        foreach ($tv_shows as $tv_show) {
            echo '<option value="' . $tv_show->term_id . '">' . $tv_show->name . '</option>';
        }
        ?>
    </select>

    <label for="season-dropdown">Выберите сезон:</label>
    <select name="season" id="season-dropdown"></select>

    <label for="episode-dropdown">Выберите эпизод:</label>
    <select name="episode" id="episode-dropdown"></select>
</form>


 // Добавить JS скрипт

jQuery(document).ready(function ($) {
    $('#tv-show-dropdown').change(function () {
        var selectedShow = $(this).val();

        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'load_dropdown_options',
                taxonomy: 'season',
                parent_id: selectedShow,
            },
            success: function (response) {
                $('#season-dropdown').html('');
                $.each(response.data, function (key, value) {
                    $('#season-dropdown').append('<option value="' + value.term_id + '">' + value.name + '</option>');
                });
            }
        });
    });

    $('#season-dropdown').change(function () {
        var selectedSeason = $(this).val();

        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'load_dropdown_options',
                taxonomy: 'episode',
                parent_id: selectedSeason,
            },
            success: function (response) {
                $('#episode-dropdown').html('');
                $.each(response.data, function (key, value) {
                    $('#episode-dropdown').append('<option value="' + value.term_id + '">' + value.name + '</option>');
                });
            }
        });
    });
});



// functions.php

function create_custom_taxonomies() {
    register_taxonomy('tv_show', 'post', array(
        'label' => 'ТВ Шоу',
        'hierarchical' => true,
        'public' => true,
        'show_ui' => true,
    ));

    register_taxonomy('season', 'post', array(
        'label' => 'Сезоны',
        'hierarchical' => true,
        'public' => true,
        'show_ui' => true,
    ));
}

add_action('init', 'create_custom_taxonomies');


Создайте AJAX-эндпоинт для обработки динамических обновлений выпадающего списка. Добавьте следующий код в свой файл functions.php.

// functions.php

function load_dropdown_options() {
    $taxonomy = isset($_POST['taxonomy']) ? sanitize_text_field($_POST['taxonomy']) : '';
    $parent_id = isset($_POST['parent_id']) ? intval($_POST['parent_id']) : 0;

    $options = get_terms(array(
        'taxonomy' => $taxonomy,
        'parent' => $parent_id,
        'hide_empty' => false,
    ));

    wp_send_json_success($options);
}

add_action('wp_ajax_load_dropdown_options', 'load_dropdown_options');
add_action('wp_ajax_nopriv_load_dropdown_options', 'load_dropdown_options');