Jump to content

Dependent selection parent, child, child of child


Recommended Posts

Hi guys,

I am trying to make a dependent selection for list of cities (dependent on country and continent. So first you select the continent, then country and the city which redirects you to the city page

What I have in my processwire







------------North America


-------------------------New York





-------------------------Hat Yai


I used so far this ajax plugin to make it all "chained"


In the template where I have the selection menu this is the code I'm using:

<div class="form-group" >

<select class="form-control" id="continent" name="continent">
  <option value="">Continent</option>
 <option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="Asia">Asia</option>

<select class="form-control" id="country" name="country">
  <option value="">Country</option>
<option value="France" class="Europe">France</option>
<option value="USA" class="North America">USA</option>
<option value="Thailand" class="Asia">Thailand</option>
<select class="form-control" id="city">
  <option value="">City</option>
$root = $pages->get("/continent/europe/france/"); $children = $root->children(); foreach($children as $child) { echo "<option value='{$child->url}' class='france'>{$child->title}</option value>"; }; 
$root = $pages->get("/continent/europe/usa/"); $children = $root->children(); foreach($children as $child) { echo "<option value='{$child->url}' class='usa'>{$child->title}</option value>"; };
$root = $pages->get("/continent/europe/thailand/"); $children = $root->children(); foreach($children as $child) { echo "<option value='{$child->url}' class='thailand'>{$child->title}</option value>"; };


And it works all right, I can select the continent, then a country and then one of the available city of this country and it redirects me to the city page for example /continent/france/paris

However, my concern is that if the lists gets bigger, this approach will make the site slow (not sure though), my question is, what would be a better approach to achieve this? or should this be ok?


Link to comment
Share on other sites

Don't know how often the data will change, but it would be a possible solution to cache your template markup and rebuild it on storing new data. This would ommit the code execution everytime, without the first request after new data was stored.

Link to comment
Share on other sites

Thanks for the suggestion

Would this be something like this, just read about the markupcache in another thread:

$cache = $modules->get("MarkupCache"); 

if(!$data = $cache->get("france_options")) { foreach($pages->find("parent=/continent/europe/france/") as $france) { $data .= "<option value='{$france->url}' class='france'>{$france->title}</option>";} $cache->save($data);} echo $data;
if(!$data = $cache->get("usa_options")) { foreach($pages->find("parent=/continent/north-america/usa/") as $usa) { $data .= "<option value='{$usa->url}' class='1usa'>{$usa->title}</option>";} $cache->save($data);} echo $data;

and so on for every country...

Yesterday I was trying to run this chained selection with 193 countries holding about 300 cities (without markupcache), the page was loading 7/8 seconds :)

So far, I realize my approach is very much inefficient (php/processwire newbie)

The last selection seem to be the biggest "bottleneck" since I echo all possible country options (cities) at once, so that explains the high load time I believe

Not sure how it's possible to render the right cities at the right time (only the cities that are child of a specific parent who has been selected in the second selection step).



Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...