5492 posts
  • 5 Years of Membership
  • Affiliate Level 1
  • Australia
  • Author Level 3
+5 more
Australia
says

Ok I am creating some weird code, some may say I am nuts. But here goes.

The Concept

I have a ul / li list of items, that when clicked open respective pages. However I am creating a category page, that I want users to be able to refine their criteria on the fly.

Check this image ( very basic )

How I want it to work

My URL structure is like this. www.domain.com/pears/all/

which can be drilled down to…
  • www.domain.com/pears/uk/
  • www.domain.com/pears/usa/
  • www.domain.com/pears/china/
  • www.domain.com/pears/brazil/

etc etc.

What I want to do is, on page load. Show the ul li list of items, that they can select, with a select option / dropdown select box on the right, which is unusable until they make a selection.

When they make their selection, lets say pears the dropdown box becomes usable. With the options shown in the drop down image.

So the UX is like:

User Clicks Pears

Dropdown box, propagates with the options for PEARS ( drilldown ) the format is the same for every item.

URL path so far is www.domain.com/pears/

User then clicks on say USA

URL path is www.domain.com/pears/usa/ which onclick takes user to that page.

Any suggestions or anyone fancy attempting this. Prefer PHP with a smidgen of JS where required.

Ste

5492 posts
  • 5 Years of Membership
  • Affiliate Level 1
  • Australia
  • Author Level 3
+5 more
Australia
says

To add, would prefer that the select option / dropdown portion is actually hidden until user makes a selection from the LIST.

1832 posts
  • Beta Tester
  • Trendsetter
  • United States
  • Copyright Ninja
+6 more
plugindistrict
says

I threw this together, but may be more javascript than you are wanting. Check it out and if you like, I’ll finish it off by hiding the second dropdown and coding the onclick.

http://websmacker.com/testing.php
5492 posts
  • 5 Years of Membership
  • Affiliate Level 1
  • Australia
  • Author Level 3
+5 more
Australia
says

I threw this together, but may be more javascript than you are wanting. Check it out and if you like, I’ll finish it off by hiding the second dropdown and coding the onclick. http://websmacker.com/testing.php

Yeah that is kind of it. The issue is, I can send you the url privately so you can see what I am trying to achieve. But the first selection needs to be a ul li list to propagate the select drop down ( drill ) , which then user can submit etc..

Cheers for that, we have used something similar ( dynamic selects ) on another site of ours, but I havent been able to nail it from a ul li list.

I will email you ( via your profile ) the site link.

Ste

1832 posts
  • Beta Tester
  • Trendsetter
  • United States
  • Copyright Ninja
+6 more
plugindistrict
says

Ok, I updated it accordingly. http://websmacker.com/testing.php

5492 posts
  • 5 Years of Membership
  • Affiliate Level 1
  • Australia
  • Author Level 3
+5 more
Australia
says

ust back, awesome thankyou :) I owe you one, will have a bash at your logo later to say thanks :)

1832 posts
  • Beta Tester
  • Trendsetter
  • United States
  • Copyright Ninja
+6 more
plugindistrict
says

no problem! Glad I could help :)

by
by
by
by
by
by