Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Kevin Korte
Kevin Korte
28,149 Points
Posted by Kevin Korte
Kevin Korte
28,149 Points

Creating select dropdowns

Lets say I had hundreds of posts with machine information. How do I even go about making a dropdown that filters the results of the dropdown from what was selected before it, and finally displaying the results after all dropdowns have been selected. Maybe Zac Gordon ?

For instance, the drop downs might go

1)Type of machine 2)Year 3)Make 4)Model

is this a categories thing, tags or custom taxonomy thing? Can someone point me in the right direction?

Thanks!

4 Answers

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

You're going to need to manipulate the list the WordPress make with jQuery to make it act like a select list. Here's some code I made earlier...no, I just found this quickly.

$("ul").on("click", ".init", function() { $(this).closest("ul").children('li:not(.init)').toggle(); });

var allOptions = $("ul").children('li:not(.init)'); $("ul").on("click", "li:not(.init)", function() { allOptions.removeClass('selected'); $(this).addClass('selected'); $("ul").children('.init').html($(this).html()); allOptions.toggle(); });

$("#submit").click(function() { alert("The selected Value is "+ $("ul").find(".selected").data("value")); });

Here's the jsfiddle - http://jsfiddle.net/Starx/a6NJk/2/

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Thank you, this gets me pointed int he right direction. My weak link is javascript/jquery

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

No worries Kevin Korte. It's not my strength either but I know enough to know what I need to look for to find someone's code that has mastered it.

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

It's going to be a combination of CSS and/or jQuery in order to get the menu to work as a dropdown menu. That's one step.

The next step is to setup your categories etc. And then when a post is made with relevant data to a category, select that category to attach to the post.

Lastly, and the simple bit, organise your menu using your categories through the backend of WordPress.

There's a lot of jQuery and CSS plugins out there already for dropdowns so you may be best doing a Google and finding one you like. Maybe an uber menu? Think there's a plugin actually called that.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Hey Matt, I appreciate the help and the link. Just to be clear, what I'm looking for are select dropdowns, like:

<select>
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
    <option>Option4</option>
</select>

Which I didn't see on the link. The CSS will be no problem, the javascript doesn't look too complicated (I've been checking out similar sites that do this already for navigation.) The big question is what is the best route to use Wordpress specific commands to populate the lists correctly.

Here is a site that uses this type of select menu navigation.

http://parts.polarisind.com/Browse/Browse.asp