1

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.

2 Answers 2

0

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.

2
  • Can you also add the crux of the solution here so that even if link dies it works . Explanation to the code would also be great!
    – bravokeyl
    Commented Aug 1, 2016 at 11:00
  • 1
    thank you for your replay, I added the example with little Explanation.
    – john
    Commented Aug 2, 2016 at 10:52
0
<!-- 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');
1
  • Can you add some notes explaining your answer rather than just posting a block of code. Commented Jan 24 at 16:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.