Using jquery to write dependent comboboxes
This how-to shows how to create two or more dependent comboboxes. It's described to do it with Zope Page Templates over the ZMI, but the same technique can be used with formlib-based forms.
Step by step
The JavaScript library jQuery is already included in Plone 3.1 out-of-the-box, but if you're using an older version of Plone, just download it from the jQuery website and place the 'jquery.js' file into an active skin layer. We are going to develop this example using just three or four Zope objects over the ZMI.
The next step is to create the main page template. Create a PageTemplate object named "index_html" with the following content:
<html metal:use-macro="here/main_template/macros/master">
<tal:js metal:fill-slot="javascript_head_slot">
<!-- This include it's needed if you are using a Plone version older than 3.1
<script type="text/javascript" src="jquery.js"></script>
/-->
<script type="text/javascript" src="combos.js"></script>
</tal:js>
<body>
<div metal:fill-slot="main">
<select id="first-select">
<option value=0>Select</option>
<option value=1>Option 1</option>
<option value=2>Option 2</option>
</select>
<select id="second-select">
<option value=0>Select</option>
</select>
</div>
</body>
</html>
Now we have to create another PageTemplate that will return the values for the second combobox. Create a PageTemplate object named "combo-values" with the following content:
<tal:block define="value request/value"> <tal:if condition="python:value=='0'"> <option value=0>Select</option> </tal:if> <tal:if condition="python:value=='1'"> <option value="1-1">1-1</option> <option value="1-2">1-2</option> </tal:if> <tal:if condition="python:value=='2'"> <option value="2-1">2-1</option> <option value="2-2">2-2</option> </tal:if> </tal:block>
In this example, we just return static values but in a real world example you may want to use a PythonScript or something like that to get dinamically generated values, for example, coming from a catalog search.
Finally, we create a File object called "combos.js" with the javascript magic. Note that Plone uses the 'jq' prefix instead of the default'$' one to avoid naming collisions:
jq(document).ready(function(){
jq('#first-select').change(function(){
jq('#second-select').load('combo-values?value='+this.value);
});
});
That's all. Go to the index_html page and check it works.
Further information
To use this idea in a formlib based form, you will need to use jQuery selectors to get the correct <select> element. See the jQuery selectors' documentation for further information.
If you're using an old version of Plone that doesn't include jQuery, replace jq with $ in the combos.js file and you'll be done:
$(document).ready(function(){
$('#first-select').change(function(){
$('#second-select').load('combo-values?value='+this.value);
});
});
Visit our