© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.
MOST COMMON USE
A droplist—also known as a drop-down list, a drop-down menu, and a pull-down menu—is a list that contains several options of which only one can be selected at a time. Use a droplist widget in a form when there is a question with many possible choices, of which only one will be selected. For example, choosing a country from the long list of all the world's countries is typically done with a droplist.
ADD, REMOVE, AND REORDER DROPLIST OPTIONS
To add and edit options in a droplist, double-click the droplist widget to open the "Edit Droplist" dialog. Add an option to the droplist by clicking the green "+" icon. Type the text of that option in the new droplist item that gets created. To add several new options to the droplist at once, use the "Add Many" button (make sure to separate each new option with a line break).
You can use the blue arrow icons to reorder the droplist options. The red "x" icon deletes the currently selected list item, and the red "x" with the dots next to it deletes all items currently in the list.
LOCATION AND SIZE
To move a widget, drag and drop it into place or use the arrow keys to nudge. You can also choose the exact location of a widget using the "x" and "y" fields in the top toolbar or in the Inspector’s Style tab.
When a widget is selected, a green border is drawn around it. Handles on the border can be dragged to resize the widget. To maintain the aspect ratio of a widget when resizing via the handles, hold the [SHIFT] key while dragging.
Widgets can also be resized to a specific pixel value. Use the “w” and “h” fields in the top toolbar or in the Inspector’s Style tab to set the widget size in pixels. To constrain the widget’s proportions, click the “Maintain aspect ratio” icon between the “w” and “h” fields.
Editable properties of a droplist widget's formatting include text font and family, text color, and fill color. These properties can all be controlled from both the Style tab of the Inspector and in the Style Toolbar at the top of the interface.
SELECTING A LIST OPTION
In the browser, the user can open the droplist and choose an option to select it.
You can also dynamically change the selected option in a droplist. Use the action "Set Selected List Option". You can choose a specific list option or use a variable to set the new selected list option. Learn about using variables here.
LIMITATIONS AND WORKAROUNDS
DYNAMICALLY ADDING AND REMOVING ITEMS
The options in a droplist cannot be dynamically changed in the HTML output, but there are a couple of ways you can approximate the effect.
You can make a dynamic panel with multiple states, each containing a droplist with different contents.
Alternatively, you can make a custom droplist using shape widgets. In addition to allowing for variable contents, a custom droplist can also have custom styling.