Cascading DropDown element

  • Views Views: 38,529
  • Last updated Last updated:


      Access element (+)
      Birthday element
      Button element
      Calculation element
      Captcha element
      Checkbox element
      Colour Picker element
      Count element (+)
      Database join element
      Date element
      Digg element
      Display text element
      Dropdown element
      Facebook Like element
      Field element
      File Upload element
      Folder element
      Google Map element
      Image element
         Image databese join
      Internal id element
      IP element
      J!Date element
      Kaltura element
      Link element
      Notes element
      OpenStreetMap element
      Picklist element
      Radio Button element
      Rating element
      Sequence element
      Slider element
      Tags element
      Textarea element
      Thumbs element
      Time element
      Timer element
      Timestamp element
      Total element
      User element
      User group element
      Video element
      View level element
      YesNo element
      Youtube element
      Akismet validation
      Is Email validation
      Is Not validation
      Is Numeric validation
      Not empty validation
      PHP validation
      Rsa id
  • Introduction​

    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.



    • 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:


    (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:

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

    Front end​


    • 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​

    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​

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

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