Dynamic dependent Dropdown lists for categories, sub-categories and posts

Question

I'm using WordPress 3.5. I need a way to implement a code or plugin to allow users to navigate through posts using dependent(chained) dropdown lists.

In other words I would like 3 dropdown menus to be dynamically populated based on the selection chosen in the previous dropdown lists.

This would consist of:

Dropdown 1: Category*
Dropdown 2: Sub- Category* 
Dropdown 3: List of posts in Sub-Category*

*Dropdown 1 would be pre populated with categories.

*Dropdown 2 would list the sub categories of menu 1 based on the user selection.

*Dropdown 3 would list the posts in the sub category chosen in menu 2.

To help you understand further, in my website I have the Category "TV Series" which has as sub-categories(child) other series, like "Dexter", "CSI:Miami" etc. Series also have other sub-categories(child) the number of seasons, like

1. "Season 1"
2. "Season 2"
3. "Season N".

Each season contains the appropriate posts.

The Hierarchy is like this:

Tv Series (main category)

Dexter

 Season 1
 Season 2
 Season n

CSI:Miami

 1. Season 1
 2. Season 2
 3. Season n

So for example the dynamic dropdowns I would like to use are the following:

Dropdown 1: Select TV Show (Category)
Dropdown 2: Select Season (sub-category)
Dropdown 3: Select Episode (posts)

I was searching the web for the past few days without any results.

I already tried a plugin named Category Ajax Chain Selects but it's outdated and not working properly.

Answer 1

you may find your answer here and Here's a demo of it.

HTML code example

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

<label for="brand">Make:</label>

<select size="1" id="make" class=" validate['required']" title=""  onChange="updatepage();" type="select" name="style">
<option value="-1">–Choose a Make-</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">Model:</label>

<select name="cat" id="cat" class="postform">
<option value="-1">–Choose a Model-</option>
<option class="level-0" value="172">1 Series</option>
<option class="level-0" value="173">2 Series</option>
<option class="level-0" value="106">3 Series</option>
</select>
</div>
<div id="style-sub-1"  class="Audi"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
    <label for="brand">Model:</label>

<select name="cat" id="cat" class="postform">
<option value="-1">–Choose a Model-</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 Code

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

you should consider including jQuery and moving the code out of the function to be invoked.

Answer 2

<!-- Your template file (e.g., page-template.php) -->

<form action="#" method="post">
    <label for="tv-show-dropdown">Select TV Show:</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">Select Season:</label>
    <select name="season" id="season-dropdown"></select>

    <label for="episode-dropdown">Select Episode:</label>
    <select name="episode" id="episode-dropdown"></select>
</form>


 // Add JS Script

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' => 'TV Shows',
        'hierarchical' => true,
        'public' => true,
        'show_ui' => true,
    ));

    register_taxonomy('season', 'post', array(
        'label' => 'Seasons',
        'hierarchical' => true,
        'public' => true,
        'show_ui' => true,
    ));
}

add_action('init', 'create_custom_taxonomies');


Create an AJAX endpoint to handle the dynamic dropdown updates. Add the following code to your functions.php file.

// 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');