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.

  1. Drag the drop-down elements to the canvas.
  2. 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.
  3. Replace the default values by double-clicking on them and in their place type the names of countries.
  4. Click on OK. Go to the Event tab and click on On Mouse Click and, in the list that opens.
  5. Then click on Create Interaction and choose Set Value from the actions on the left.
  6. 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).
  7. 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.
  8. Release the drop-down with the names of the countries in the dotted box Double click to edit.
  9. Drag over the "=" button located in the General functions tab.
  10. The dotted box appears. Double click on it and enter "USA".
  11. Click on OK and do it again in the Events tab. Here you will see the description of the interaction you have just built.
  12. By clicking on the text "If not", you can define the other cases just as you did with the first.
  13. 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.
Back to all Tutorials