---
title: "Conditional dropdowns"
canonical_url: "https://www.nutrient.io/guides/workflow-automation/form-templates/forms-with-javascript/conditional-dropdowns/"
md_url: "https://www.nutrient.io/guides/workflow-automation/form-templates/forms-with-javascript/conditional-dropdowns.md"
last_updated: "2026-06-08T09:14:14.501Z"
description: "Learn how to enhance your forms with dynamic dropdown menus using JavaScript. This guide demonstrates how to change state options based on facility selection, ensuring a tailored user experience."
---

# 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](https://www.nutrient.io/guides/workflow-automation/admin-guide/forms/importing-and-exporting-forms.md).

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![conditional dropdown animation](@/assets/guides/workflow-automation/files/1667/conditional-dropdown.gif)

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`

[Download the Form](https://www.nutrient.io/assets/nutrient-media/guides/workflow-automation/form-templates/forms-with-javascript/gridnumbers.json.zip)
---

## Related pages

- [Forms with JavaScript](/guides/workflow-automation/form-templates/forms-with-javascript.md)
- [Totaling columns and rows in a grid](/guides/workflow-automation/form-templates/forms-with-javascript/totaling-columns-and-rows-in-a-grid.md)