This tutorial shows how to trigger an action like setting a panel state based on the selection of a droplist using conditional logic and the OnChange event

Conditional Logic Tutorial

Droplist Selection

Droplist Interactions

Now you can perform actions when a particular item is selected in a droplist.

The condition builder defaults happen to be what we want for this case. The condition should read "If the selected option of AnimalDroplist equals value None".

Click OK to close the Condition Builder.

Still need help? Check out the forum or drop us a line at support@axure.com.

© 2002-2012 Axure Software Solutions, Inc. All rights reserved.

The Round Up

(AxureDroplistSelection.zip)

This zip file contains the RP file needed to complete this tutorial

In the Case Editor, click "Set Panel State(s) to State(s)" and check the AnimalPanel checkbox. 

The "None" state will be selected by default. Click OK to close the Case Editor.

Repeat steps 1 through 3 for the Puppy and Kitty droplist items.

The second and third cases should have conditions for "Puppy" and "Kitty" and set the state of the panel accordingly.

Double-click OnChange to add a 4th case, but this time don't add a condition.  We've already setup conditions for 3 of the 4 available droplist items so the final case will have if none of the above 3 conditions have been met.

Add an action to the fourth case to set the AnimalPanel state to Goldfish.

That's it! Generate a prototype and test it out.

First, open DroplistSelection.rp and open the "Droplist Selection" page.

Select the droplist and add a case to the OnChange event.  In the Case Editor, click Add Condition to open up the Condition Builder.

Step 1: Add OnChange case

Step 2: Build the condition for "None"

Step 3: Add action to set the panel state

Step 4: Repeat for Puppy and Kitty states

Step 5: Add the final "else if" case

Step 6: Generate the prototype

Next: Required Fields Tutorial

Back to Conditional Logic