Easy chained select lists using Zend Framework and Prototype

Building a set of select lists that are dependant of each other can be a daunting task, but for a simple two-level list – in that what you select from one drop-down will changing what’s displayed in one or more other drop-downs – is actually quite easy thanks to Zend Frameworks and Prototype, both of which support Json.

What I needed to do was have a list of items. Each item would have a different type, colours, range and so on. When I selected an item from a select list I wanted the other optional lists to update. Now, I’ve seen this done with Ajax to completely rebuild the html of the select lists, but I didn’t want to go down that route. Instead, I decided to use a bit of PHP and a bit of Javascript.

First of all I had to decide how I wanted to store my items. I could have gone down the headache of a database, but I wanted to keep this simple. So in steps the always-simply ini file. Zend Framework makes it really easy to parse this particular format, which is great news!

The ini file looks something like:

[php][_default]

name = “_default”
type = “”
range = “home; garden; garage; kitchen”
colour = “white; silver; black; red; blue; yellow; green”

[fridge : _default]

name = “Fridges and freezers”
type = “double; chest; mini”

[fork : _default]

name = “Forks”
type = “big; small”
range = “kitchen; garden”
colour = “silver; black”

[trash : _default]

name = “Trash cans”[/php]

As you can see, I extend one base item type, changing only what I need to.

Now I have my ini file, I need to convert that to Json. The easiest way to do this is simply to load the whole ini file into a nicely formatted array and convert that array to the Json format. The PHP to do that is actually quite simple, and looks something like this:

[php] $val) {
if ($key{0} != ‘_’) {
foreach ($val as $k => $v) {
$items[$key][$k] = (strstr($v, ‘;’)) ? array_map(‘trim’, explode(‘;’, $v)) : $v;
}
}
}
$json = Zend_Json::encode($items);
[/php]

Again, the Zend Framework comes to the rescue and does all the hard work for me. All I have to do is process the ini file, making arrays out of lists (the strings separated with semi-colons) and ignoring anything that starts with an underscore.

That file ends up giving me a Json string and a PHP array, both of which can be used in the form. In this HTML I have quickly put in the select lists, but I’m sure you could do something programmatically, or in a template, or something… this is just for show, after all. 😉

[php]

[/php]

The main part of that is, of course, the javascript. Using Prototype I'm easily able to convert the Json string from the PHP file back in to an object, and then set an event observer on the items select list to register a change in value. All that's left to do is loop over the other form elements (which, to make things easy, I hard-coded in to the optlist variable, but again, this could be dynamic) and set the correct values, enabling or disabling the form elements where needed.

The above code can be found running at:

http://dev.amnuts.com/chained/