OFBiz Tutorial:Use Dependent Selects to Manage Country-State Select Boxes

Anil PatelPublished: Updated:

Javascript components for managing Dependent Selects is starting to find use in ecommerce applications we are developing. It all started with need for updating contents of State field, on change of Country in postal address forms.

More then a year ago we started using Ajax for updating State select box options on change of Country select box value. It was a step forward but I wasn’t satisfied. Recently I had time to build a Dependent Select javascript component that takes the process of managing dependent selects boxes to the next level. Please read my blog post, OFBiz Tutorial – Dependent Selects for Prototype, to know more about it. If you are wondering about a scenario from real world, Here you go.

Below is the piece of code from the Freemarker template for the Checkout page in OFBiz ecommerce application.  It renders Country and State select boxes with their options.

Following Javascript code will unobtrusively manage the relationship between Country select box (master) and State select box (slave),

Where ‘checkoutPanel’ is Id of wrapper div that encloses checkout html form. Apply ‘dependentSelectMaster’ class to select boxes that have dependent slave elements, making them the master. Slave select box is related to its master using title and class attribute of elements, A select box is slave if it has a class applied to it that is equal to title of master select box.

The javascript code snippet traverses DOM tree looking for master select boxes. Using title attribute of master select it finds all the slaves and creates Dependent select relationship between them. Its all clean and simple.

Needless to say, you’ll need to include Prototype.js and DependentSelect.js in your webpage. I hope you will find this short OFBiz tutorial useful.

– Anil

Anil Patel About Anil Patel
Anil Patel is COO at HotWax Systems as well as an OFBiz project committer, PMC member, and active community contributor. He also studies yoga. Anil will join other HotWax Systems team members and advisors in periodically posting thoughts here related to OFBiz, eCommerce, ERP, and other related topics.

Leave a Reply

Your email address will not be published. Required fields are marked *