How to design conditional drop-down select lists in your interactive prototypes
Build conditional drop down lists in your interactive prototypes with the help of conditions.
With this tutorial you will learn how to change the content of a drop-down select list according to which value the user has selected in another one.
1) In a new mobile prototype, drag two select list widgets to the canvas.
2) Select the first select list and go to Properties (or right-click on it). Click on “Edit values” to edit its values.
3) Delete the default values and in their place type three names of countries (i.e. USA, Brasil, Switzerland). Click OK.
4) Select the first select list, go to the Events tab and click on ‘Add event’.
5) Click on the first list and add an ‘On change’ + ‘Set Value’ event. Then add the names of one of the country’s cities as fixed values, e.g. add three US cities. Click OK.
6) In the events tab, click on “Add Condition“. In the condition builder, drag the drop-down with the names of the countries to the first dotted box. Then drag the “=” function located in the General functions tab. Finally, double click on the second dotted box and enter “USA”.
7) Click OK. In the Events tab, you will see the description of the interaction you have just built.
We have indicated that the three US cities should only be displayed if the USA is clicked on in the other drop-down list
By clicking on the text “Else add condition”, you can define the other cases just as you did with the first one.
Click on Simulate to verify that each time you change a value in the Country drop-down, the right cities are loaded in the other drop-down list.