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),

$('checkoutPanel').select('.dependentSelectMaster').reverse().each( function (elt) {
  new Dependent( $$( '.'+elt.title ).first() , elt );
})

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


DATE: Jul 14, 2010
AUTHOR: Anil Patel
OFBiz Tutorials, OFBiz Ecommerce, OFBiz Development, OFBiz Tutorial, prototype.js, OFBiz, Anil Patel, Prototype Tutorial, OFBiz Tutorials for Beginners