Ajax Dynamic Cascade Drop-Downs

Introduction

In Joget, dynamic cascading drop-down lists are a powerful feature used to update select box, radio button, or checkbox options dynamically based on the value of another field. This enables creating forms that respond in real-time, making data entry faster and more intuitive. By implementing AJAX, the dynamic cascading drop-downs become even more efficient, improving performance when dealing with large datasets or multiple field dependencies.

This article will guide you through the setup of dynamic cascading drop-down lists in Joget, the advantages of using AJAX for cascade options, and how to enable these features easily in your forms.

Dynamic cascading drop-down list

Joget Form Builder allows the creation of dynamic cascade drop-down lists that change the options of a select box, radio button, or radio based on another form's field value.

Tips
Dynamic Cascading Drop-Down List is also supported in List Filters.

In the example shown below, the Category Select box is based on the type of leave designated in the Type of Leave field:

When Paid is selected on the Type of Leave
When Unpaid is selected on the Type of Leave

To configure your form as in the example above, follow the steps below:

Configure the Type of leave select box options.
Now, configure the Category select box options and use the Grouping field to associate them to the Type of leave form element.
In Advanced Options > Dependency, input the Field ID of the Type select box.
Apply your changes and preview your form.
It is also possible to populate Options through the use of Options Data Store. For example, the form table below stores all categories.
In the Category properties, go to Load Data From and choose Form Data. Then go to the Configure Form tab and choose the form as shown in the example below.

Enable AJAX cascading

Joget supports AJAX loading of cascade options. This helps improve the performance when you have many options and only want a few options related to your controlling field to be loaded and shown.

Dynamic Cascading for Select Box / Radio button / Checkbox

Since Version 3.0.3, Joget added support for Dynamic Cascading for the Select Box / Radio button / Checkbox. This allows these fields to dynamically load available options based on the other field value.

How it works?

It load all the available options at once then show/hide it when the value of controlling field is change. See to Ajax Dynamic Cascading Drop-Down List to understand about this feature.

Ajax Cascading Drop-Down List

Since Version 4.0.0 release, Joget enhanced this feature to support Ajax loading of cascade options.

Tremendous performance improvement

This feature helps to improve the performance when you have a huge number of options and when you only want a few options shown that is related to your controlling field to be loaded and shown.

Turning on with just a flick of switch

To turn AJAX loading on, you only need one extra step from the Dynamic Cascading Drop-Down List tutorial.

Check the checkbox of "Use AJAX for cascade options?" when you are configuring the Options Binder.

This property option is currently available in:

Try the free Joget app ISIC List from Joget Marketplace, which has an excellent example of using the Ajax Cascade Drop Select Box.

Video tutorial

How to Dynamically Change the Options of a Select Box or Radio Button