OFBiz Tutorial – Dependent Selects for Prototype
In my first OFBiz Tutorial, I will show you how to make dependent select boxes using Prototype.
Here it is, Dependent class allows you to link two select boxes in a parent child relationship. Any two select boxes can be linked. All you need to do is
- Parent select box options should have unique value of title attribute.
- On child select box, class attribute of options should be set to title of their parent.
Here is sample code. (Copied from Dependent Select by Silver website)
<select id="selectme" name="selectme"><option value="">-- select --</option><option title="flowers" value="1">Flowers</option><option title="animals" value="2">Animals</option>
</select><select id="selectme2" name="selectme2"><option value="">-- select --</option><option class="flowers" value="1">Sunflower</option><option class="flowers" value="2">Rose</option><option class="animals" value="3">Dog</option><option class="animals" value="4">Cat</option>
My goal was to build a dependent select box that will work in complex enterprise application scenarios. A nonstandard case is when the value of a parent select box value is change by background code. It gets even more complex when select boxes are disabled. Good news is, our Dependent class is smart enough to deal with these use scenarios.
In the process of solving these problems I learned about an interesting feature in Prototype, it has a AOP like ability. We can modify behavior of existing code by wraping function inside of a custom wrapper function. A Prototype function wrap is applied to the setValue function on Element to handle the background select value changes and disabled select box value change.
I have enjoyed building and using this new component. Download the component from its home on the web. I hope you will be able to find some interesting applications for it as well.