1. "Fabrik 4" helpers needed!

    You are invited to join other community members active in coding, maintaining and improving Fabrik. Please visit https://fabrik.help for more information!
    Dismiss Notice

Cascading DropDown element

Mar 5, 2023
Cascading DropDown element

  • Introduction(top)

    Cascading dropdown allows for the content of a dropdown element?s choices to be dependent on another element. Typical examples of application would be to have state or province drop down adjust to the country selection or a list of libraries dropdown offer different content based on the city entered in another element.

    Options (top)


    • Hidden - is the element hidden
    • Eval - Do you want to evaluate (PHP) the default value Element default examples.
    • Default - The default value to use when adding a record. Note - this is only evaluated on record creation. Use calc, if you need ongoing evaluation.



    • Render as - How to render the cascading dropdown.
    • Connection The Fabrik connection containing the list we will use as the element's data. Note: Fabrik can not join across connections, so the selected connection must be the same as the list's connection!
    • List - the Fabrik table that we want to use for the dropdown's data
    • ID - the Fabrik list element that contains the value we want to use for each dropdown option - this is the data that is recorded in the database and should normally be the lists' primary key. The primary key field is suffixed with "[Recommended]" (as shown in the screen shot above)
    • Label - the Fabrik table element that contains the data used for the option label - this is the text that the user sees for each of the drop down options.
    • Or Concat label - OPTIONAL MySQL CONCAT statement to use instead of individual element, such as `{thistable}.last_name, ', ', {thistable}.first_name`. Leave blank to use the element selected in the 'Label' dropdown. Use the {thistable} placeholder to ensure correct table name is used (which might have a _N suffix if more than one join is used to the same table)
    If you wish to set a label from a data value that is not an available placeholder, you can use MySQL Concat to retrieve the value by embedding a subquery within the CONTACT Label field:

    Code (Text):

    (SELECT `column_containing_desired_value` FROM other_table WHERE `id` = {thistable}.field_containing_foreign_key)

    • Placeholder - if using 'Render as => auto-complete' then you can specify the HTML5 placeholder text to use when no value is selected
    • Max width - If using 'Render as => dropdown' then you can state the max-width for the element. Useful to truncate very long option labels.


    • Watch element - The element name to watch. When this element's value changes the options in the cascading drop down will be updated.
    • Foreign key - The dropdown's table's field that must contain the same value as the selected 'watch elements' value.
    • Where query - filter the drop down options with an additional where query. Don't include 'where' in the text you enter here - e.g "active = 1"
    • Show please select - Add a "please select" option to the top of the drop down's options
    • Please select label - text to show for the "please select" option
    • Eval options - PHP code to run to alter the element options. Each option is an object and can be referenced in the eval code with the variable $opt. It has two properties $opt->value and $opt->text. The array $data is available which contains the values of element/field values currently on the form. These elements are referenced thusly:
    Code (Text):

    $myVar= $data[tableName___elementName_raw'] ?? ''; // for Fabrik 3 and 4

    Front end (top)

    • Link to joined record - If the element is read only and this option turned on the the read only text is turned into a link which points to a detailed view of the joined record. In the front end example above this would take you through to a detailed view of a region record.
    • Description field - In addtion you can select a field from the selected 'Table' which contains additional information about the selected option. This addtional information will be displayed alongside the dropdown and changes as different selections are made.

    Example Form using Country-Region (top)

    Precondition: existing fabrik lists

    Country: elements id, country_name

    Region: elements id, region_name, country_id(which stores the country id, e.g. a databasejoin element to Country) and some additional elements like active, region_abbr


    In this above example,

    country is a databasejoin element pointing to the Country list, Value=id, Label= country_name

    Region dropdown is the cascading dropdown element which should be triggered by the country element.

    The setup of the CDD element:

    List: region
    id: id [Recommended]
    Label: region_name [alternatively, or CONCAT label can be used to output region.region_abbr, ' - ', region.region_name to show both the abbreviated and the full name spaced by a hyphen]
    Watch element: country
    Foreign key': country_id
    [Where query: active = 1] optionally a filter can be set up

    Additional Tip for CDD Radiobutton(top)

    Add following code in Javascript option of CDD element and select 'Focus' event to blur unchecked radio-button options.

    Code (Text):
    jQuery("input:radio[name*='tablename___elementname[]']").click(function() {
        //this is needed when options are in more than one row
  • Loading...