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
For the Custom 1 field (Country), we specified US and Canada and their “Submitted Value”
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 () {
$("#form_input_custom2").empty(); //remove any existing values
switch($("#form_input_custom1").attr("value")) {
case "CA": //Provinces
$('#form_input_custom2').append('British Columbia');
$('#form_input_custom2').append('Manitoba');
$('#form_input_custom2').append('New Brunswick');
$('#form_input_custom2').append('Saskatchewan');
$('#form_input_custom2').append('Northwest Territories');
$('#form_input_custom2').append('Nunavut');
$('#form_input_custom2').append('Newfoundland and Labrador');
$('#form_input_custom2').append('Prince Edward Island');
$('#form_input_custom2').append('Nova Scotia');
$('#form_input_custom2').append('Quebec');
$('#form_input_custom2').append('Alberta');
$('#form_input_custom2').append('Ontario');
$('#form_input_custom2').append('Yukon Territory');
break;
case "US": //States
$('#form_input_custom2').append('American Samoa');
$('#form_input_custom2').append('Georgia');
$('#form_input_custom2').append('Kansas');
$('#form_input_custom2').append('Minnesota');
$('#form_input_custom2').append('Texas');
$('#form_input_custom2').append('United States Minor Outlying Islands');
$('#form_input_custom2').append('Alaska');
$('#form_input_custom2').append('Alabama');
$('#form_input_custom2').append('Colorado');
$('#form_input_custom2').append('Kentucky');
$('#form_input_custom2').append('Northern Mariana Islands');
$('#form_input_custom2').append('New York');
$('#form_input_custom2').append('Rhode Island');
$('#form_input_custom2').append('South Carolina');
$('#form_input_custom2').append('South Dakota');
$('#form_input_custom2').append('Washington');
$('#form_input_custom2').append('District of Columbia');
$('#form_input_custom2').append('Guam');
$('#form_input_custom2').append('Iowa');
$('#form_input_custom2').append('Ohio');
$('#form_input_custom2').append('Oregon');
$('#form_input_custom2').append('California');
$('#form_input_custom2').append('Delaware');
$('#form_input_custom2').append('Hawaii');
$('#form_input_custom2').append('Massachusetts');
$('#form_input_custom2').append('Montana');
$('#form_input_custom2').append('North Carolina');
$('#form_input_custom2').append('Nebraska');
$('#form_input_custom2').append('New Jersey');
$('#form_input_custom2').append('Virgin Islands, U.S.');
$('#form_input_custom2').append('Connecticut');
$('#form_input_custom2').append('Florida');
$('#form_input_custom2').append('Indiana');
$('#form_input_custom2').append('Oklahoma');
$('#form_input_custom2').append('Utah');
$('#form_input_custom2').append('Wisconsin');
$('#form_input_custom2').append('West Virginia');
$('#form_input_custom2').append('Idaho');
$('#form_input_custom2').append('Illinois');
$('#form_input_custom2').append('Maryland');
$('#form_input_custom2').append('Maine');
$('#form_input_custom2').append('Missouri');
$('#form_input_custom2').append('Mississippi');
$('#form_input_custom2').append('New Mexico');
$('#form_input_custom2').append('Pennsylvania');
$('#form_input_custom2').append('Vermont');
$('#form_input_custom2').append('Wyoming');
$('#form_input_custom2').append('Arizona');
$('#form_input_custom2').append('Louisiana');
$('#form_input_custom2').append('North Dakota');
$('#form_input_custom2').append('New Hampshire');
$('#form_input_custom2').append('Nevada');
$('#form_input_custom2').append('Virginia');
$('#form_input_custom2').append('Arkansas');
$('#form_input_custom2').append('Michigan');
$('#form_input_custom2').append('Puerto Rico');
$('#form_input_custom2').append('Tennessee');
break;
}
});
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.