Category: How do I do X?
Resource links
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

Hide/Show Dropdown Based On Selection?

Issue

As a user, I want to hide a dropdown until a specific selection is chosen on another dropdown. I need to find a way to convert the visibility property of the dropdown to JavaScript and add code to only show it if the desired option is selected.

Resolution

To control the visibility of a Select widget based on the selection made in another Select widget in Appsmith, follow these steps. 

For example, you want to control the visibility of Select2 based on the value selected in Select1. Use JavaScript to manage the visibility of Select2 based on the value of Select1.

  • In the Properties pane, go to the Visibility property of Select2 in the Appsmith editor.
  • Enter the following JavaScript code to verify the selected option's value in Select1, and if the value is BLUE, Select2 is shown else hidden:
{{ Select1.selectedOptionValue === 'BLUE' ? true : false }}