Back to all Tutorials
Conditional Drop-Downs
Change the content of a drop-down menu according to what the user has chosen in another one.
- Drag the drop-down elements to the canvas.
- Select one of the two elements and go to Properties. Click on the Pencil icon (next to the Value drop-down) to edit its values.
- Replace the default values by double-clicking on them and in their place type the names of countries.
- Click on OK. Go to the Event tab and click on On Mouse Click and, in the list that opens.
- Then click on Create Interaction and choose Set Value from the actions on the left.
- Select a second drop-down and add the cities of one of the countries (if you entered the USA, you can now enter New York, Washington DC and Chicago).
- Now go to Add Condition to indicate that the three previous cities should only be displayed if the USA is clicked on in the other drop-down.
- Release the drop-down with the names of the countries in the dotted box Double click to edit.
- Drag over the "=" button located in the General functions tab.
- The dotted box appears. Double click on it and enter "USA".
- Click on OK and do it again in the Events tab. Here you will see the description of the interaction you have just built.
- By clicking on the text "If not", you can define the other cases just as you did with the first.
- Click on Simulate to verify that each time you change a value in the country drop-down, other different ones are loaded in the city drop-down.