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

1 Views

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.

Read More

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.

Post Views: 1

Related posts

Leave a Reply

1 comment

  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.