Dropdown with Show/Hide
Dropdown list with Show/Hide
Upon selecting different options for the Dropdown List, we can hide or show the other fields in the same form.
In this example, the dropdown list consists of 3 options, A, B, C.
Step 1: We first create a form with a dropdown list and a few other fields.
- Create a form named “Dropdown with Show/Hide”
- Add a dropdown field with options A,B,C
- Add 3 other fields.
Step 2. Next, we need to edit the dropdown field.
if (get('dropdown')=='A') {
show('first');
hide('second');
hide('third');
}else if(get('dropdown')=='B'){
hide('first');
show('second');
hide('third');
}else if(get('dropdown')=='C'){
hide('first');
hide('second');
show('third');
}else {
show('first');
show('second');
show('third');
}
This is what we need to add to the On Change Action portion of the dropdown field.
- In our example, we use the field name of our dropdown list field which is ‘dropdown’ as part of the condition within the if else statements.
- ‘first’, ‘second’, ‘third’ are the field names of the other fields. Depending on how you want to show or hide the field, put the fieldname within the Show or Hide functions.
- Other than the selectable option, we also need to take care of the scenario where no options are picked. Hence under the last else statement, it will show all 3 fields.
