Conditional dropdowns
This form can be downloaded and imported into your Workflow Automation instance. The downloadable JSON file is at the bottom of this page. For information on importing forms, refer to this guide.
When creating forms, there may be situations where, if someone selects an item from a dropdown, you want the items for a different dropdown to change.
In this example, when someone selects a facility, we use JavaScript to change the items in the Location by State field. So if someone selects the East facility, their options are New York or Vermont. If they select North as the facility, their state selections are Minnesota and Wisconsin.
Form
Here's the JavaScript used:
//declare global variable const selFacility = intForm.getElementByClientID("selFacility"); console.clear(); //event handler for Facility select list selFacility.events.onChange = () => { let selState = intForm.getElementByClientID("selState"); //clear out existing choices selState.Choices = []; //add choices based on facility switch (selFacility.Answer){ case "North": selState.Choices = [{ "Label": "Minnesota", "Value": "Minnesota" },{ "Label": "Wisconsin", "Value": "Wisconsin" }]; break case "South": selState.Choices = [{ "Label": "Louisiana", "Value": "Louisiana" },{ "Label": "Mississippi", "Value": "Mississippi" }]; break; case "East": selState.Choices = [{ "Label": "New York", "Value": "New York" },{ "Label": "Vermont", "Value": "Vermont" }]; break; case "West": selState.Choices = [{ "Label": "California", "Value": "California" },{ "Label": "New Mexico", "Value": "New Mexico" }]; break; }//end of switch }//end of onChange