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.

1 Answer 1

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
    Aug 1, 2016 at 11:00
  • 1
    thank you for your replay, I added the example with little Explanation.
    – john
    Aug 2, 2016 at 10:52

Your Answer

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

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