Digioh Help Docs
  • Home
  • Book Training
  • JavaScript API
  • Release Notes
  • Contact Support
  1. Home
  2. Knowledge Base
  3. The Digioh Platform
  4. How to Create a Dynamic Dropdown Menu
Searching...

How to Create a Dynamic Dropdown Menu

What is a Dynamic Dropdown?

A dynamic dropdown is a multi-level (or dependent) dropdown that displays a new dropdown set dynamically based on user response to a previous dropdown menu.

An example of this is a Country dropdown. If a user selects “United States,” the next dropdown shows a list of US States. If they select “Canada,” the dropdown would instead show a list of Canadian Provinces.

Another example may be where users select their “Industry,” and you display a second dropdown of subcategories in that industry.

Adding a Dynamic Dropdown to Your Form

Here, we’ll show how you can create a dynamic dropdown to show a state or province dropdown based on which country a visitor selects.

Step 1: Create a Lightbox with Two Dropdown Form Fields

In the editor, go to the forms tab and set up two custom fields with the Dropdown field type.

Custom 1: Country (with US and Canada)
Custom 2: States or Provinces

lightbox with two dropdown fields

For the Custom 1 field (Country), we specified US and Canada and their “Submitted Value”

dropdown menu with United States and Canada inputs

Since the Custom 2 dropdown will be dynamic based on Country Selection, there is no need to enter anything in the box.

Step 2: Add Custom JavaScript to Your Form

We need custom JS that changes the available values in Custom 2 (either states or provinces) based on the selected value in Custom 1 (US or Canada). First, get the dropdown ID and the selected option value from your browser’s DevTools:

And here, the selected option value:

Every option has text and value:

When we fill the Custom 2 dropdown we need to set both. Our first dropdown contains two options: “United States” (with value “US”) and “Canada” (value “CA”). The second dropdown will populate according to the first user selection. If the user selects “United States,” we will display a list of States, and if they select “Canada,” we will display a list of Provinces. Here is the main code:

$("#form_input_custom1").change(function() {
    var selectedValue = $("#form_input_custom1").val(); // Getting the selected value of custom1
    $("#form_input_custom2").empty(); // Remove any existing values

    switch (selectedValue) {
        case "CA": // Provinces
            $('#form_input_custom2').append('<option value="BC">British Columbia</option>');
            $('#form_input_custom2').append('<option value="MB">Manitoba</option>');
            $('#form_input_custom2').append('<option value="NB">New Brunswick</option>');
            $('#form_input_custom2').append('<option value="SK">Saskatchewan</option>');
            $('#form_input_custom2').append('<option value="NT">Northwest Territories</option>');
            $('#form_input_custom2').append('<option value="NU">Nunavut</option>');
            $('#form_input_custom2').append('<option value="NL">Newfoundland and Labrador</option>');
            $('#form_input_custom2').append('<option value="PE">Prince Edward Island</option>');
            $('#form_input_custom2').append('<option value="NS">Nova Scotia</option>');
            $('#form_input_custom2').append('<option value="QC">Quebec</option>');
            $('#form_input_custom2').append('<option value="AB">Alberta</option>');
            $('#form_input_custom2').append('<option value="ON">Ontario</option>');
            $('#form_input_custom2').append('<option value="YT">Yukon Territory</option>');
            break;

        case "US": // States
            $('#form_input_custom2').append('<option value="AS">American Samoa</option>');
            $('#form_input_custom2').append('<option value="GA">Georgia</option>');
            $('#form_input_custom2').append('<option value="KS">Kansas</option>');
            $('#form_input_custom2').append('<option value="MN">Minnesota</option>');
            $('#form_input_custom2').append('<option value="TX">Texas</option>');
            $('#form_input_custom2').append('<option value="UM">United States Minor Outlying Islands</option>');
            $('#form_input_custom2').append('<option value="AK">Alaska</option>');
            $('#form_input_custom2').append('<option value="AL">Alabama</option>');
            $('#form_input_custom2').append('<option value="CO">Colorado</option>');
            $('#form_input_custom2').append('<option value="KY">Kentucky</option>');
            $('#form_input_custom2').append('<option value="MP">Northern Mariana Islands</option>');
            $('#form_input_custom2').append('<option value="NY">New York</option>');
            $('#form_input_custom2').append('<option value="RI">Rhode Island</option>');
            $('#form_input_custom2').append('<option value="SC">South Carolina</option>');
            $('#form_input_custom2').append('<option value="SD">South Dakota</option>');
            $('#form_input_custom2').append('<option value="WA">Washington</option>');
            $('#form_input_custom2').append('<option value="DC">District of Columbia</option>');
            $('#form_input_custom2').append('<option value="GU">Guam</option>');
            $('#form_input_custom2').append('<option value="IA">Iowa</option>');
            $('#form_input_custom2').append('<option value="OH">Ohio</option>');
            $('#form_input_custom2').append('<option value="OR">Oregon</option>');
            $('#form_input_custom2').append('<option value="CA">California</option>');
            $('#form_input_custom2').append('<option value="DE">Delaware</option>');
            $('#form_input_custom2').append('<option value="HI">Hawaii</option>');
            $('#form_input_custom2').append('<option value="MA">Massachusetts</option>');
            $('#form_input_custom2').append('<option value="MT">Montana</option>');
            $('#form_input_custom2').append('<option value="NC">North Carolina</option>');
            $('#form_input_custom2').append('<option value="NE">Nebraska</option>');
            $('#form_input_custom2').append('<option value="NJ">New Jersey</option>');
            $('#form_input_custom2').append('<option value="VI">Virgin Islands, U.S.</option>');
            $('#form_input_custom2').append('<option value="CT">Connecticut</option>');
            $('#form_input_custom2').append('<option value="FL">Florida</option>');
            $('#form_input_custom2').append('<option value="IN">Indiana</option>');
            $('#form_input_custom2').append('<option value="OK">Oklahoma</option>');
            $('#form_input_custom2').append('<option value="UT">Utah</option>');
            $('#form_input_custom2').append('<option value="WI">Wisconsin</option>');
            $('#form_input_custom2').append('<option value="WV">West Virginia</option>');
            $('#form_input_custom2').append('<option value="ID">Idaho</option>');
            $('#form_input_custom2').append('<option value="IL">Illinois</option>');
            $('#form_input_custom2').append('<option value="MD">Maryland</option>');
            $('#form_input_custom2').append('<option value="ME">Maine</option>');
            $('#form_input_custom2').append('<option value="MO">Missouri</option>');
            $('#form_input_custom2').append('<option value="MS">Mississippi</option>');
            $('#form_input_custom2').append('<option value="NM">New Mexico</option>');
            $('#form_input_custom2').append('<option value="PA">Pennsylvania</option>');
            $('#form_input_custom2').append('<option value="VT">Vermont</option>');
            $('#form_input_custom2').append('<option value="WY">Wyoming</option>');
            $('#form_input_custom2').append('<option value="AZ">Arizona</option>');
            $('#form_input_custom2').append('<option value="LA">Louisiana</option>');
            $('#form_input_custom2').append('<option value="ND">North Dakota</option>');
            $('#form_input_custom2').append('<option value="NH">New Hampshire</option>');
            $('#form_input_custom2').append('<option value="NV">Nevada</option>');
            $('#form_input_custom2').append('<option value="VA">Virginia</option>');
            $('#form_input_custom2').append('<option value="AR">Arkansas</option>');
            $('#form_input_custom2').append('<option value="MI">Michigan</option>');
            $('#form_input_custom2').append('<option value="PR">Puerto Rico</option>');
            $('#form_input_custom2').append('<option value="TN">Tennessee</option>');
            break;

        default:
            $('#form_input_custom2').append('<option value="">Select an option</option>');
    }
});

The Digioh team can help you write the JavaScript needed to create your dynamic dropdown. Just send us an email, and we’ll be happy to create your custom code.

Related Reading:

  • How to Autofocus the Email Field in Your Form
  • Adding Hidden Fields to Forms
  • How to Create a Two-Step Form that Capture Emails and Mobile Numbers
Updated on February 13, 2025
Was this article helpful?
Yes No

Related Articles

  • Designing Boxes with Content Above the Fold
  • Create a Click to Copy Button
  • Email and SMS Compliance
  • Digioh Owned Identification Solution
  • ShowHide Radio or Dropdown Options
  • How to Use Named Custom Fields in Digioh to Pass ZeroParty Data into Klaviyo for Personalized Campaigns
Need Support?
Can't find the answer you're looking for?
Contact Support

Popular Articles

  • Recommended Sizes for Boxes on Desktop and Mobile
  • Security and Compliance (GDPR, CCPA, ADA, SOC 2 Type II)
  • Digioh App Extensions
  • How to Edit or Remove Outline Around Inputs and Buttons
  • How to Add a Tooltip to Any Box with HTML

Need Support?

Can't find the answer you're looking for?
Contact Support
Copyright © Digioh
  • Home
  • Book Training
  • JavaScript API
  • Release Notes
  • Contact Support