WordPress Development Asked by DrHell on December 5, 2020
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.
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.
Answered by john on December 5, 2020
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP